关于white-space、word-break和break-word

一直以来都只是知道这三个属性都可以在某种情形下控制是否换行,但具体该使用哪一个属性不是很清楚,实战时就一个个试,哪个管用用哪个,今天整理了一下这三个属性具体的意义。

一、white-space

white-space 是用来设置如何处理元素内的空白的,这里的空白不仅仅指的空格,还包括换行符,所以它才能对文本是否换行有所控制。他的可选值和对应的描述如下:

1.normal:默认。空白会被浏览器忽略。也即是我们通常所知的连续的空白会合并为一个空格,行首的空格会完全忽略

2.pre:空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

3.nowrap:文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

4.pre-wrap:保留空白符序列,但是正常地进行换行。实际使用时跟pre作用类似

5.pre-line:合并空白符序列,但是保留换行符。

二、word-wrap

word-wrap 属性允许长单词或 URL 地址换行到下一行。他的可选值和对应的描述如下:

1.normal:只在允许的断字点换行(浏览器保持默认处理)。即使单词长度超过容器宽度也不换行。

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

三、word-break

word-break 属性规定自动换行的处理方法。他的可选值和对应的描述如下:

1.normal:使用浏览器默认换行规则

2.break-all:允许在单词内换行。

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

单从介绍来看,word-wrap:break-word和word-break:break-all似乎是一样的,都是允许单词内换行,但两者有着很重要的不同之处。

首先要明确一点,word-wrap:break-word是针对长单词或者连续字符串的,它只有在单个单词长度超过容器宽度的时候才会起作用。

而word-break:break-all不一样,它是针对一行文字的,normal下,当一行文本超过容器宽度时会将最后一个单词放到下一行显示,而break-all会将最后一个单词断行显示,以最大程度的铺满第一行。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章