文本换行
默认行为
浏览器默认按照单词完整性优先的原则换行，一般在单词或数字序列之间，或者连字符后面换行
不过中文是固定宽度字符，每个汉字都视为独立的可断点
CSS 溢出自动换行
主要关注一下表格：
overflow-wrap和word-wrap是同一个属性，word-wrap是overflow-wrap的别名
| 代码 | 长单词处理 | 标点 |
|---|---|---|
overflow-wrap: break-word | 尝试将单词移到下一行来保持不分割 如果还是没有足够空间，则截断单词 | 换行 |
word-break: break-all | 溢出直接截断单词 | 避免标点自己开始一行 在连续的标点可能会溢出容器 |
line-break: anywhere | 溢出直接截断单词 | 换行 |
长单词处理上的差异
overflow-wrap: break-word在换行上相对来说没这么暴力，会尽可能的保证单词的可读性，但也可能会因此导致出现一段空白区域。另外两个则暴力的多，能换就换
标点符号处理
可以看到 word-break: break-all 不会让 . 单独一行，而是至少会让一个字母和它一行，如果想打破这种规则，可以使用line-break: anywhere。由于这种规则，会造成word-break: break-all在长标点符号情况下，可能会溢出
实践
- 只有英文的情况下，设置
overflow-wrap: break-word;
- 中英文混杂、中文情况下，设置
line-break: anywhere;
防止文本换行
设置 white-space: nowrap，可以阻止文本换行
按照HTML换行
设置 white-space: pre 或者把文本放到 <pre> 标签中，可以按照在 HTML 中键入的格式换行文本。不过要注意，它也会保留 HTML 中的空格，因此请注意使用的格式
平衡排版
设置 text-wrap: balance 可以实现文本换行的平衡，它会尽量让多行文本之间的单词数量近可能一样
好处：
对于标题级别的文本，这种换行在视觉上会优雅好看，阅读起来也会更便捷
缺点：
- 性能消耗大（为了减少性能消耗，文本行数超过4行，设置 balance 是不生效的）
- 可能会出现一段空白空间，可以观察上面的例子