CSS hyphens属性

CSS hyphens属性用于指定文本如何断行，即在何处在单词中断行。它可以帮助自动分隔过长的单词，从而避免断词造成的不美观。

语法

hyphens: none | manual | auto;

• none：文本不断行处理。
• manual：强制指定断行点。需要使用­或­来标记断词点。
• auto：默认值，浏览器自行决定断行点。

使用示例

p {
  hyphens: auto;
}

上面的代码将自动分隔过长的单词的单词。如果需要手动指定断行点，可以使用­或­：

<p>
  hand&shy;ful
</p>

<p>
  hand&#173;ful
</p>

这样，在auto模式下，浏览器将以-为断行点，分隔单词。在manual模式下，手动指定断词点，并在单词过长时使用。

兼容性

该属性在IE11以下的浏览器不支持。可以使用Polyfill.js实现IE浏览器的兼容。

总结

hyphens属性可以帮助自动分隔过长的单词，从而避免断词造成的不美观。在实际使用中，可以根据需要灵活选择不同的断行方式，从而实现更好的视觉效果。