Как не сломать слово в конце строки, используя pre tag в html/css?

Question

Я использую <pre> тег в HTML, но как сделать длинное слово для перехода на следующую строку вместо того, чтобы разбить его на две части?

Это простой пример, Here

В моем примере мне нужно слово: contains, чтобы перейти к следующей строке автоматически и не вырезано на двух

pre.test { 
 
    width: 11em; 
 
    border: 1px solid #000000; 
 
    word-wrap: break-word; 
 
    white-space: pre; 
 

 
}

<pre class="test"> This paragraph contains a very long word: 
 
thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</pre>

Answer 1

Вы можете добавьте white-space: pre-wrap; к вашим CSS как: https://jsfiddle.net/ub8fstbu/1/

Answer 2

Добавить white-space: pre-line;:

pre.test { 
 
    width: 11em; 
 
    border: 1px solid #000000; 
 
    word-wrap: break-word; 
 
    white-space: pre-line; 
 
}

<pre class="test"> This paragraph contains a very long word: 
 
thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</pre>

Reference