本文详细介绍了CSS中`word-break`和`word-wrap`属性的用法和区别。`word-break`主要用于控制单词的换行规则，`normal`遵循浏览器默认，`break-all`允许单词内换行，`keep-all`则限制在空格或连字符处换行。而`word-wrap`专注于长单词的处理，`normal`仅在允许的断字点换行，`break-word`确保长单词能换行适应父元素。理解这两个属性有助于优化网页文本的布局。
相同点
两种都是让英文句子在父级宽度不够的情况下进行换行。
浏览器默认行为↓
区别
1. word-break
强制文字换行，无论一句话到达父级宽度时是不是一整个单词，都会强制换行，让单词断句。如果一个单词超出父级容器宽度，会使单词断开并换行。
| 值 | 描述 |
|---|---|
| normal | 使用浏览器默认的换行规则 |
| break-all | 允许单词内换行 |
| keep-all | 只能在半角空格或连字符处换行 |
| hyphenate | 不换行，撑出父级宽度 |
break-all效果↓
hyphenate效果↓
2. word-wrap
允许长单词换到下一行，当父级宽度不够的时候，不管英文单词自动换行是当一整个单词不够放时，整个单词一起换到下一行。或是当英文单词的长度超过了父级容器长度时，英文单词还会显示一整行而超出容器范围。
| 值 | 描述 |
|---|---|
| normal | 只在允许的断字点换行（浏览器保持默认处理） |
| break-word | 在长单词或URL地址内部进行换行 |
break-word效果
扫一扫
1111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
