[分享]css单词换行时不折断

 在进行网页排版的过程中，我们经常需要使用css来控制文字的布局。但是，当文字长度超出容器宽度时，我们可能会遇到一个问题——单词换行时不折断。例如，在下面的容器中，我们希望“web”单词不被折断： T...

 在进行网页排版的过程中，我们经常需要使用css来控制文字的布局。但是，当文字长度超出容器宽度时，我们可能会遇到一个问题——单词换行时不折断。
例如，在下面的容器中，我们希望“web”单词不被折断：

This is a web page.

如果我们使用默认样式，这段文字会被折断为两行：
This is a
web page.
这可能会对页面的美观度产生不利影响。为了解决这个问题，我们可以使用css中的“word-break”属性来控制单词的换行情况。
word-break属性有以下几个取值：
· normal：默认值，单词可以被折断。
· break-all：单词可以被折断成两部分。
· keep-all：单词不会被折断。
因此，我们可以将上面的样式改为：

This is a web page.

这样就可以避免“web”被折断了。
需要注意的是，word-break属性只适用于非CJK（中日韩）字符。对于CJK字符的控制可以使用另一个属性——“overflow-wrap”。
overflow-wrap属性有以下几个取值：
· normal：默认值，允许单词折断。
· break-word：单词可以被折断成两部分。
因此，如果我们希望中文单词也不被折断，可以将上面的样式改为：

<p style="width: 200px; border: 1px solid black; word-break: keep-all; overflow-wrap: break-word;">
  非常长的中文单词非常长的中文单词非常长的中文单词非常长的中文单词非常长的中文单词非常长的中文单词
</p> 

这样，中文单词就不会被折断了。
总之，在进行页面布局时，我们要注意单词换行问题，以保证页面的美观度和可读性。使用word-break和overflow-wrap属性可以很好地解决这个问题。