1. 介绍
长单词的出现在网页中是很常见的。如果不加以处理，它会影响页面的布局，特别是破坏div的大小。本文将介绍一些防止长单词破坏div的方法。
2. word - break
2.1 属性介绍
通过使用CSS3新增的word-break属性可以解决长单词破坏布局的问题。该属性用于指定如何在单词内断开换行。
div {
word-break: break-all;
}
该代码会将一个长单词拆分成两个，并在div的边界处换行。这样长单词就不会破坏div的布局了。
2.2 属性值介绍
word-break属性有以下可选值：
normal：只在允许的断点处换行。
break-all：允许在单词内换行。
keep-all：只在不允许断点的地方换行（比如汉字）。
注意：这三个值不同于word-wrap属性的可选值。
3. overflow-wrap
3.1 属性介绍
CSS3的overflow-wrap属性用于指定 当一个内容块溢出其父容器时，如何进行换行。
div {
overflow-wrap: break-word;
}
上述代码的作用是在单词内的任意字符处换行。这样长单词就会被分为两行，不会破坏div的布局。
3.2 属性值介绍
overflow-wrap属性的可选值：
normal：遵循浏览器的规则进行换行。
break-word：允许在单词内换行。
4. word-spacing
4.1 属性介绍
CSS3的word-spacing属性用于设置文本内单词之间的间距。
div {
word-spacing: 4px;
}
上述代码的作用是在单词间添加4px的间距。这样就可以避免长单词连在一起，破坏div的布局。
4.2 属性值介绍
word-spacing属性的值可以为长度值、百分比、normal。
5. 字体大小
5.1 介绍
字体大小是影响长单词是否破坏页面布局的重要因素之一。如果字体过小，长单词可能无法正常换行。
5.2 常见字体大小
14px
16px
18px
20px
24px
一般情况下，选择合适的字体大小，就可以避免长单词破坏div的布局。
6. 总结
上述这些方法都可以有效地避免长单词破坏布局的问题。在实际开发中，可以根据具体情况选择是否使用这些方法。