CSS - 不允许切片

Question

例如，我不希望将单词“Call”分割成“Ca
ll”，但我想应用 'white-space:wrap;'

//'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>

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