CSS - 不允许对单词进行切片

Question

例如，我不希望在"Ca
中切片"Call"一词ll"，但我想应用"空白：换行";

//'float:left;' it place the text next to the image.
<div style="float:left;"><img  src="img.jpg" /></div>
<div style="color:gray;word-wrap:normal;white-space: wrap;">Why my text is sli
ced. </div>

Answer 1

这可能是您正在寻找的规则，但看看它如何与您的其他样式结合使用。

word-break: keep-all;

其他值是正常值（仅在空格和连字符上中断）和全部中断值（该行将在任何字符处中断）

<div style="color:gray;word-wrap:normal;white-space:wrap;word-break:keep-all;">
    Why my text is sliced.
</div>

另一方面 - 在您的问题中，您实际上在单词中有一个换行符 - 浏览器无法知道这不是两个单词，并且如果需要，总是会在那里中断。您是否从正在输入换行符的文档粘贴文本，当它将您的文本换行到新行时？