不要断字 CSS

有时候在网页中出现了一个超长的单词或者句子，如果该单词或句子不能完整地显示在一行中而被截断了，会导致网页的可读性变差。这时，我们可以使用 CSS 中的 word-wrap 和 hyphens 属性来防止断字。

word-wrap属性

word-wrap 属性用于指定当一个单词太长无法放在一行中时是否允许该单词换行。它的取值有 3 种：normal、break-word 和 initial。

• normal: 默认值，单词不会被强制换行
• break-word: 单词可被强制换行
• initial: 将属性设置回其默认值

示例代码：

p {
  word-wrap: break-word;
}

hyphens属性

hyphens 属性用于指定在单词换行时是否打断单词。它的取值也有 3 种：none、manual 和 auto。

• none: 单词不会被断开
• manual: 只有在手动添加断字点的情况下才会断字
• auto: 浏览器根据语言和文化习惯自动添加断字点

示例代码：

p {
  hyphens: auto;
}

如何组合使用这两个属性？

我们可以将两个属性结合起来使用，这样更加完美。

示例代码：

p {
  word-wrap: break-word;
  hyphens: auto;
}

结论

使用 word-wrap 和 hyphens 属性可以直接防止出现断字问题，大大提升网页的可读性。