换行

样式中,常用到的换行操作:

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地址时,浏览器才会在其中间换行。

原文地址:https://www.cnblogs.com/qingshanyici/p/12918439.html