Question

我正在使用＆lt; pre＆gt;在我的设计中标记。事情是我甚至打破了行尾的话。假设我在行的末尾，如果有一个大字，那么它就会破坏它。例如，在该行的末尾，我们有一个大字说STACKOVERFLOW 所以我的pre标签显示单词STACKOVERFLOW：

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：

“打破字”
一个牢不可破的＆＃34;字＆＃34;如果行中没有其他可接受的断点，则可以在任意点处断开。塑造角色的形状仍然好像没有被破坏，而字形星团必须一起保持为一个单元。在断点处不插入连字符。

因为你正在使用＆＃39; break-word＆＃39;规则，这意味着如果容器中没有剩余宽度并且没有其他更可接受的断点，那么您的长单词将被破坏。

请尝试使用＆＃39; normal＆＃39;规则：

“正常”
线条可能仅在允许的断点处突破。但是，如果行中没有其他可接受的断点，'word-break：keep-all'引入的限制可以放宽以匹配'word-break：normal'。

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

2 个答案: