word-break和word-wrap
相同点
两种都是让英文句子在父级宽度不够的情况下进行换行。
浏览器默认行为↓
区别
1. word-break
强制文字换行，无论一句话到达父级宽度时是不是一整个单词，都会强制换行，让单词断句。如果一个单词超出父级容器宽度，会使单词断开并换行。
| 值 | 描述 |
|---|---|
| normal | 使用浏览器默认的换行规则 |
| break-all | 允许单词内换行 |
| keep-all | 只能在半角空格或连字符处换行 |
| hyphenate | 不换行，撑出父级宽度 |
break-all效果↓
hyphenate效果↓
2. word-wrap
允许长单词换到下一行，当父级宽度不够的时候，不管英文单词自动换行是当一整个单词不够放时，整个单词一起换到下一行。或是当英文单词的长度超过了父级容器长度时，英文单词还会显示一整行而超出容器范围。
| 值 | 描述 |
|---|---|
| normal | 只在允许的断字点换行（浏览器保持默认处理） |
| break-word | 在长单词或URL地址内部进行换行 |
break-word效果
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！