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>

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

CSS - 不允许分割单词

CSS - don't allow word to be sliced

word-wrap