换行

样式中，常用到的换行操作：

1、word-break

word-break属性：normal、break-all、keep-all

normal：使用浏览器默认的换行规则，默认属性

break-all：允许在单词内换行

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

 

2、white-space

white-space属性：normal、pre、nowrap、per-wrap、pre-line、inherit

normal：空白会被浏览器忽略。默认属性

pre：空白会被浏览器保留

nowrap：文本不会换行，文本会在同一行上继续

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

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

inherit：从父元素集成white-space属性的值

文本溢出用省略号就是用这个属性。适合中文。

 

3、flex

flex属性中，它的子元素里也可以换行，这些属性都是设置在其容器上。

flex-wrap：nowrap、wrap、wrap-reverse

nowrap：不换行，默认属性

wrap：换行

wrap-reverse：换行，但是第一行在下面

 

英文文本换行：

（1）文本自动换行word-break

对于英语，浏览器只会在半角空格和连字符的地方进行换行，不会在单词中间换行。使用word-break属性，可是让浏览器在单词中间换行。

word-break:keep-all/break-all；

（2）长单词和url地址换行word-wrap

长单词出现的可能性并不大，而URL地址由于没有空格也没有连字符，往往会被浏览器默认为一个长单词。使用word-wrap属性让url换行。

word-wrap:nomal/break-word;

 

word-break与word-wrap的不同：

（1）word-break:当该属性设置为break-all的时候，组件内的每一行文本最后一个单词自动换行。

（2）word-wrap:即使让该属性设置为break-word，浏览器也会尽量让长单词、url单独占一行，只有当一行文本不足以显示这个长单词或url地址时，浏览器才会在其中间换行。