换行相关属性

换行相关的几个属性

参考：

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break
• https://www.zhangxinxu.com/wordpress/2020/03/css-overflow-wrap-anywhere/
• https://www.zhangxinxu.com/wordpress/2015/11/diff-word-break-break-all-word-wrap-break-word/

属性名	属性值
word-wrap	normal | break-word
word-break	normal | break-all | keep-all | break-word
overflow-wrap	normal | break-word | anywhere

white-space

属性名	属性值
white-space	normal | nowrap | pre | pre-wrap | pre-line | break-spaces
white-space 用于处理空白符，以及控制换行，但是不规定是否强制换行。

word-break

word-break 属性值最多，其中的 break-all 和 keep-all 都与 CJK 有关。

观察看来，word-wrap 和 word-break 的 break-word 效果几乎相同，和 break-all 的区别在于，break-all “能断则断”，可以把一个完整的单词从中间换行。

overflow-wrap

至于 overflow-wrap，这是一个新的属性，用于替换之前的 word-wrap。

word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。
word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。
From: https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-wrap

overflow-wrap的 anywhere 应用的换行宽度更小，小到会对英文的单个字母或中文的单个汉字进行换行（注意下面例子的 min-content）：

.text {
    width: min-content;
    margin: 50px;
    background-color: pink;
    overflow-wrap: anywhere; 
}

html 代码：

<div class="text">
        Most words are short & don't need to break. But Antidisestablishmentarianism is long. The width is set to
        min-content, with a max-width of 11em.
</div>