CSS实现强制换行的解决方法
💡
原文中文，约1300字，阅读约需3分钟。
📝
内容提要
文本换行可以使用white-space属性的normal、pre-wrap、pre-line来实现，即使有overflow: hidden; text-overflow: ellipsis;也不影响换行。可以通过设置white-space属性为nowrap来强制不换行，设置word-wrap属性为break-word和word-break属性为normal来实现自动换行，设置word-break属性为break-all来强制英文单词断行。在CSS中，可以使用overflow:hidden和white-space:normal来设置不转行，使用word-break属性来设置强行换行。在解决IE的框架被英文撑开的问题时，可以在body中加入word-break: break-all。word-break属性的取值有normal、break-all和keep-all，分别表示依照亚洲语言和非亚洲语言的文本规则允许在字内换行、允许非亚洲语言文本行的任意字内断开、不允许字断开。
🎯
关键要点
- 强制换行使用white-space的normal、pre-wrap、pre-line属性。
- overflow: hidden; text-overflow: ellipsis;不影响换行。
- white-space属性的值包括normal、pre、nowrap、pre-wrap、pre-line和inherit。
- 强制不换行可以使用div{ white-space:nowrap; }。
- 自动换行可以通过div{ word-wrap: break-word; word-break: normal; }实现。
- 强制英文单词断行使用div{ word-break:break-all; }。
- CSS设置不转行使用overflow:hidden和white-space:normal。
- word-break属性的取值有normal、break-all和keep-all，分别对应不同的换行规则。
- 在IE中解决框架被英文撑开的问题，可以在body中加入word-break: break-all;。
- word-break属性是IE5+专有属性，适用于多种语言的文本换行行为。
➡️
