如何避免在html/css中使用pre标签在行尾打破单词？

Question

我在HTML中使用<pre>标记，但是如何让长词跳到下一行，而不是将它分成两部分？

这是一个简单的例子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