关于换行以及换行属性

对于CSS的white-space属性，我想大部分人应该和我差很少，最经常使用的就是nowrap属性，最多用来作超长省略号显示的时候会用到【hiahiahia~】

原由是这样的：产品doggie策划了一个元旦活动，活动主页最下边须要显示配置的活动规则，注意，是配置的活动规则，因此，免不了运营小妹要在后台配置一个活动规则，确定不期望她们能配置html文本的呀，对吧，因而她们配置的是这样的：

一、封垫苏菲房间都是克拉夫；
    二、对方萨芬的刷分放大；
    三、粉打发打发打发

这样色的，因而，取数据的时候，那隐藏的换行符免不了就被带走了~走了~了，它就变成了一个真正的，换行符。就像word文档里面看见的那样

因而，页面呈现与DOM结构就变成了这样

显然，这不是咱们真实想要它呈现的效果，咱们固然是想它能聪明的在该换行的时候换行呀，对吧，那么问题来了，为何，它没有换行呢？

换行符

阿望脑壳里能记下来的换行符一共有4种

1. \n：最初接触\n，是学C语言换行的时候，释义为：输入完一行内容后，光标转到下一行的起始位置
2. \r\n：回车换行（回车：回车就是把水平位置复位，换行：换行就是往下一行，不改变水平位置，能够想象一下，在word文档中点击键盘回车键，其实执行的是回车+换行的操做）
3. <br />：这个换行符是HTML惟一能识别的换行标签
4. ↵：word文档软回车标记

固然，除了这几种，不一样的语言可能会有它们本身的换行符，好比C++的endl，VB的空格+下划线

百度百科显示，word换行符是一种换行符号，它的做用是换行显示，可是它不是真正的段落标记，它的换行不是真正意义上的重起一段，所以被换行符分割的文字其实仍然仍是一个段落中的，word中基于段落的全部操做都是不会识别换行符为段落结尾的，再加上在HTML中，只能识别br标签来作基本的文本换行，因此，这也就是文章开头说的，为何word软回车换行符不能在HTML中正确回车显示了。

HTML中的换行

在HTML中，换行能够有如下几种办法

块级元素包裹

这个就很少作解释了，块级元素最基本的定义就是通常都重新行开始，相邻的块级元素将会在不一样行显示，默认了它的换行行为

br 标签

br 是HTML中默认的、惟一的可识别的换行元素，在要换行的地方加进去就行，它是一个自闭合标签

pre 标签

来，解释一下上面才说了br 是HTML中默认的、惟一的可识别的换行元素，怎么忽然有冒了个pre标签出来！

pre 元素可定义预格式化的文本，被包围在 pre 元素中的文本一般会保留空格和换行符，而文本也会呈现为等宽字体，因此，并非由于它被识别成了换行元素才致使换行，而是由于，它保留了文本节点最原始的格式，你给我什么，我还你什么，而不是像其余的元素，你给我充满换行符合空格的文本，我给你被我压缩压缩再压缩的瘦身版文本

友情提示：它不只能够保留换行格式，还能够保留你的多个空格噢，由于pre元素默认带有样式 white-space: pre;

举个栗子

<pre>
        一、封垫苏菲房间都     是克拉夫；
        二、对方萨芬的刷分放大；
        三、粉打发打发打发
    </pre>

    // 显示
    一、封垫苏菲房间都     是克拉夫；
    二、对方萨芬的刷分放大；
    三、粉打发打发打发

    <div>
        一、封垫苏菲房间都     是克拉夫；
        二、对方萨芬的刷分放大；
        三、粉打发打发打发
    </div>

    // 显示
    一、封垫苏菲房间都 是克拉夫； 二、对方萨芬的刷分放大； 三、粉打发打发打发

鉴于对pre标签的无知，在阿望还在作JSP的时候，遇到这种换行的需求一般都是正则表达式将换行符转换成br标签，而后经过HTML（vue的v-html）渲染成换行的DOM节点，相信也是大多数人的第一选择

'个人字符串1\r\n\r\n\r\n\r\n个人字符串2\r\n111'.replace(/\r\n/g, '<br />')

如今想来，当初那些前辈们教下来的也是这个办法，估计，他们也没想到，一行CSS代码就能解决吧。。。

CSS属性换行

咱们假设有个超长的文本节点："哈哈哈，congratulations"，咱们假设有个容器长度只能装得下"哈哈哈，con"

word-break

word-break 属性规定自动换行的处理方法，可让浏览器实如今任意位置的换行，它是CSS3推出的新属性（有兼容性问题），用来标明怎么样进行单词内的断句

什么叫单词内的断句呢？简单点来讲，就是当文本节点"哈哈哈，congratulations"在容器中显示成了"哈哈哈，con[假设这里换了行]gratulations"的时候，就产生了单词内断句。浏览器默认的时候，"哈哈哈，congratulations"在容器中会显示成"哈哈哈，[假设这里换了行]congratulations"，即：若是有一个单词很长，致使一行中剩下的空间已经放不下它时，则浏览器会把这个单词挪到下一行去

word-break一共有三个属性值

normal 浏览器默认的换行规则

"哈哈哈，congratulations"在容器中会显示成"哈哈哈，[假设这里换了行]congratulations"

break-all 容许在单词内换行（单词是指non-CJK (CJK 指中文/日文/韩文) 文本）

"哈哈哈，congratulations"在容器中会显示成"哈哈哈，con[假设这里换了行]gratulations"

keep-all 只能在半角空格或连字符处换行

CJK 文本不断行， Non-CJK 文本表现同 normal

word-wrap

word-wrap 属性容许长单词或 URL 地址换行到下一行

word-break一共有两个属性值

normal 只在容许的断字点换行（浏览器保持默认处理）

break-word 在长单词或 URL 地址内部进行换行

那么它与word-break的区别是什么呢？

首先看咱们的前提条件：有个超长的文本节点："哈哈哈，congratulations"，咱们假设有个容器长度只能装得下"哈哈哈，con"，那么意味着，不添加word-break与word-wrap属性的时候，该文本节点在容器内显示为"哈哈哈，[假设这里换了行]congratulations"，且单词congratulations确定是冲出了容器边界的，超级难看。这个时候word-wrap就能派上用场了，给这段文字加上word-wrap: break-word以后，文本节点就会显示成"哈哈哈，[假设这里换了行]congratula[假设这里换了行]tions"，这样，为了防止长单词溢出，就在它的内部断句了

那既然有word-wrap，又为何要有word-break属性呢？简单来讲，当设置word-break:break-all; word-wrap:break-word，咱们的超长文本"哈哈哈，congratulations"就会显示成"哈哈哈，con[假设这里换了行]gratulatio[假设这里换了行]ns"，它的用处就是：节省空间！是的，你没有看错！

word-wrap 是用来决定允不容许单词内断句的，若是不容许的话长单词就会溢出。最重要的一点是它仍是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句

word-break:break-all则更粗暴，直接进行单词内的断句

white-space

white-space 属性设置如何处理元素内的空白，这个属性声明创建布局过程当中如何处理元素中的空白符，实际上会对列表溢出换行和文字溢出进行处理

空白符

空白符是指在屏幕不会显示出来的字符（如空格，制表符tab，回车换行等），HTML默认已经把全部空白符合并成一个空格

white-space一共有五个属性值

normal 默认，空白符会被浏览器忽略

多个空格合并成1个空格，换行符被忽略，在容器宽度内自调整换行

pre 空白会被浏览器保留，其行为方式相似 HTML 中的 pre 标签

多个空格被保留，换行符被保留，不会在容器宽度内自调整换行，直到遇到 br 标签为止

nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止

多个空格合并成1个空格，换行符被忽略，不会在容器宽度内自调整换行，这是它与默认行为不同的地方

pre-wrap 保留空白符序列，可是正常地进行换行

多个空格被保留，换行符被保留，在容器宽度内自调整换行

pre-line 合并空白符序列，可是保留换行符

多个空格合并成1个空格，换行符被保留，在容器宽度内自调整换行

inherit 规定应该从父元素继承 white-space 属性的值

以上，可根据实际状况选择本身想要的属性值

另：若换行处想添加连字符，将congratulations换行显示为con-gratulatio-ns的话，可以使用属性hyphens：auto;在适当的位置自动插入连字符换行