CSS word-wrap属性介绍

简介

CSS word-wrap属性用于定义在词的中间是否允许换行，以及如何断行。

属性值

• normal: 默认值，表示只在允许的断字点换行。
• break-word: 允许在单词内换行，如果当前行无法容纳整个单词，则将其切分为多行。

适用范围

word-wrap属性适用于block和inline-block元素。

示例代码

p {
    width: 200px;
    word-wrap: break-word;
}

示例代码中，将p元素的宽度设置为200像素，并使用word-wrap属性将单词断行。

注意事项

• 默认情况下，浏览器在遇到长单词时会将其移到下一行，但如果长单词不能合适地放在一行中，它可能会导致布局问题。因此，使用word-wrap属性可以控制长单词的换行方式，以避免影响其他元素的布局。
• break-word值可能会导致单词被切断为不可读的形式，因此在使用该值时需要谨慎。

浏览器兼容性

word-wrap属性兼容大多数现代浏览器，包括Chrome，Firefox，Safari和IE。但在不同浏览器中的实现方式可能略有不同。

参考文档

• CSS word-wrap属性 - MDN