HTML中如何使用Pre标签限制分词

Question

我在设计中使用了

 标签。问题是我的 pre 甚至打破了行尾的单词。假设我在行尾，如果有一个大字，它就会中断它。例如，在行尾我们有一个大词 Whosebug。

所以我的预标记将 Whosebug 这个词显示为：

STAC
KOVERFLOW


它应该在新行中显示整个单词的位置。

以下是我的预标记代码：

pre{
        white-space: pre-wrap;
        word-wrap: break-word; 
    }


以下是我的HTML代码：

<div uib-carousel active="active" class="text-primary">
  <div uib-slide index="$index" class="uibSlider" ng-repeat='summary in desc'>
<pre class="text-justify">{{summary.info}}</pre>
</div>
</div>

Answer 1

break-word 意思是你要断字。以下对您有用吗？

pre {
   white-space: pre-wrap;
}

Answer 2

参见 w3 specification for the word-wrap property:

‘break-word’
An unbreakable "word" may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line. Shaping characters are still shaped as if the word were not broken, and grapheme clusters must together stay as one unit. No hyphenation character is inserted at the break point.

因为您使用的是 'break-word' 规则，这意味着如果容器中没有剩余宽度并且没有其他更可接受的断点，您的长单词将被断掉。

改为尝试使用 'normal' 规则：

‘normal’
Lines may break only at allowed break points. However, the restrictions introduced by ‘word-break: keep-all’ may be relaxed to match ‘word-break: normal’ if there are no otherwise-acceptable break points in the line.

HTML中如何使用Pre标签限制分词

How to use Pre tag to restrict word break in HTML

html

css

pre