首页 专题 H5案例 前端导航 UI框架

work-break: break-all和word-wrap: break-word的区别?

作者:TG 日期: 2017-10-10 阅读: 861
一直以来,对work-breakword-wrap都是止于使用,只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句,还没有深入去探究两者的区别。鉴于最近常常遇到,便来加深一下了解!

CSS中的work-breakword-wrap都是跟换行有关的,下面先来分别看看两种的用法。

1. work-break

word-break 指定了怎样在单词内断行。

word-break: normal   

word-break: break-all   

word-break: keep-all   


/* Global values */  

word-break: inherit;  

word-break: initial;  

word-break: unset;

值:
normal:使用默认的断行规则。
break-all:对于non-CJK (CJK 指中文/日文/韩文) 文本,可在任意字符间断行。
keep-all:CJK 文本不断行。 Non-CJK 文本表现同 normal。

浏览器兼容性:


有些浏览器(Chrome, Safari)还支持一个非标准的:word-break: break-word,作用类似word-wrap: break-word.

2. word-wrap(overflow-wrap)

在CSS3中word-wrap也称为overflow-wrap,用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词中断换行。

/* Keyword values */  

overflow-wrap: normal;  

overflow-wrap: break-word;   


/* Global values */  

overflow-wrap: inherit;  

overflow-wrap: initial;  

overflow-wrap: unset;

值:
normal:表示在正常的单词结束处换行。
break-word:表示如果行内没有多余的地方容纳该单词到结尾,则那些正常的不能被被分割的单词会被强制分割换行。

注意:稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法(overflow-wrap)。

浏览器兼容性:


3. work-break: break-all和word-wrap: break-word的区别?

直接上例子:
从上面的结果可以看到,同样是切割单词换行,但是word-break: break-all是会挤满整个剩余空间再换行,而word-wrap: break-word是会直接换行,后面留了一大片空白。

知识有限,如果有错误,欢迎在下方留言!




关注”全栈技术杂货铺“

全栈技术杂货铺