css属性word-wrap、word-break和white-space区别详解

作者:IT技术 | 时间:2018-10-20

css属性word-wrap、word-break和white-space三个之间有什么区别呢?很多的同学虽然看了一些文章,但依然没有太明白区别在哪,通过下面的介绍,我相信你肯定能够彻底搞明白。

浏览器默认的时候就是不加word-wrap或word-break的时候,如果有一个单词很长,导致一行中剩下的空间已经放不下它时,则浏览器会把这个单词挪到下一行去,如下图:

css属性word-wrap、word-break和white-space区别详解

当单词超过包裹它的元素的长度,就会出现下面的情况,它会溢出它的父容器外,因为这时它是不允许被截断的。

css属性word-wrap、word-break和white-space区别详解

我们给这段文字加上word-wrap:break-word,防止长单词溢出,这个时候就在它的内部断句了。这就是 word-wrap:break-word 的功能。

css属性word-wrap、word-break和white-space区别详解

long后面不是还有一段空间,使用 word-break:break-all会不浪费long后面的一段空间

css属性word-wrap、word-break和white-space区别详解

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

而word-break:break-all,它不会尝试把长单词挪到下一行,而是直接进行单词内的断句。

如果想更节省空间,那就用word-break:break-all就对了!

white-space:pre-wrap的功能保留空白符序列,并且正常地进行换行。

css属性word-wrap、word-break和white-space区别详解

通过上面的说明,你明白css属性word-wrap、word-break和white-space区别详解了吗?