引入
文本换行的问题不要紧, 但遇到真要命。多种换行随缘尝试往往是大多人的解决方案。
所以今天就来整理一下常见的文本换行。同时了解一下每种换行的应用场景
三种文本换行的前置知识
我们拿三种常见的文本换行举例(word-wrap、word-break、white-space）
首先我们整理出对应的参数表,方便查看。(不整理兼容性不好的属性，只列举常用属性)
1）word-wrap
| 值 | 描述 |
|---|---|
| normal | 单词结束处正常换行 |
| break-word | 行内没有多余的位置容纳该单词到结尾时, 单词会被分割换行。 |
2） word-break
| 值 | 描述 |
|---|---|
| normal | 使用默认换行规则 |
| break-all | 对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。 |
| keep-all | CJK 文本不断行。 Non-CJK 文本表现同 normal。 |
**CJK文本：**中日韩统一表意文字（CJK Unified Ideographs）。CJK 是中文（Chinese）、日文（Japanese）、韩文（Korean）三国文字的缩写。顾名思义，它能够支持这三种文字。（摘自百度百科）
3) white-space
| 值 | 描述 |
|---|---|
| normal | 连续的空白符会被合并，换行符会被当作空白符来处理。填充line盒子时，必要的话会换行。 |
| nowrap | 和 normal 一样，连续的空白符会被合并。但文本内的换行无效。 |
| pre | 连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。 |
| pre-wrap | 连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充line盒子时才会换行。 |
| pre-line | 连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充line盒子时会换行。 |
以上内容摘自MDN web docs
一点点准备工作
为了方便理解，我按照使用四种文字类型进行测试, 分别是 ①不含有空白符(空格\水平制表符)的中文(cjk文字)
<pre>这是一段中文测试文字这段文字不包含空白符水平制表符是一段很长很长很长很长的文字</pre>
①含有空白符(空格\水平制表符)的中文(cjk文字)
<pre>这是一段中文测试文字这段文字 包含空白符水平制表符 并且还有多个空白符 是一段很长很长很长很长的文字</pre>
③含有空白符的英文长句(非cjk文字)
<pre>Hi! My name is Tinker. I'm glod to met you. So let's us to do something. Is ok?</pre>
④不含空白符的长句(非cj文字)
<pre>
Hi!MynameisTinker.I'mglodtometyou.Solet'sustodosomething.Isok?
</pre>
准备就绪！那么让我们开始吧~
一、word-wrap
现象
normal:
break-word:
总结:
- normal和break-word都会合并空白符
- normal对长单词不会进行换行, break-word会换行。
- 汉字(CJK文字)会自动换行,英文(非CJK文字)不会自动换行。
二、word-break
现象
normal
break-all
keep-all
总结
- 三种方式都会合并多余空白符。
- break-all 会使所有类型文字超出自动换行
- keep-all 会使CJK文字不换行。非CJK文字表现等同于normal。 同时CJK文字会因为换行符、空白符、水平制表符换行。
上诉例子可能不明了：看这个
代码：
表现：
三、white-space
现象
normal
norwrap
pre-wrap
pre
pre-line
总结
- nowrap会使所以文字不换行并会合并多个空白符。
- pre-wrap会保留所以空白符(包括代码中的回车造成的空白或换行)。并且填充盒子时cjk文字会自动换行，非cjk文字单个长单词不会换行。
- pre会保存多个空白符(包括代码中的回车造成的空白或换行)，且所有文字不会换行。 4.pre-line。会保留空白符(包括代码中的回车造成的空白或换行)，但合并多个空白符。填充盒子时cjk文字会自动换行，非cjk文字单个长单词不会换行。
