break-word
会对过长的单词做词内断词处理,这样单词始终会在容器中,不会溢出容器
break-all
很暴力的一种处理方法,过长单词先断词处理,占满一行,然后再换行处理
每次看到这两个css属性都是一种眼晕的感觉,今天就来总结一下。
首先我们来来分别介绍一下这两个属性有哪些值:
word-break:
值 | 描述 |
---|---|
break-all | 允许单词内换行 |
keep-all | 只在半角或连字符处换行(兼容性不好) |
normal | 默认 |
word-wrap:
值 | 描述 |
---|---|
break-word | 在长单词或者URL的地址内部进行换行 |
normal | 只允许断字处换行,默认 |
因为word-break:keep-all
兼容性不好,所以不推荐使用。因此两者的主要区别还是在于break-all与break-word。
从字面意思上看区别显而易见:
-
break-word
会对过长的单词做词内断词处理,这样单词始终会在容器中,不会溢出容器, -
break-all
很暴力的一种处理方法,过长单词先断词处理,占满一行,然后再换行处理,然而这样解释还不是太清晰。那就写一个demo看一下效果。
同时说明一下,英文默认是不换行的,会造成溢出。
中文会默认换行,如果要不换行则需要设置:white-space:nowrap;
chrome浏览器中的中文标点不能位于一行的开头,因此会将标点的前一个字也换行,如果前一个也是标点依次往前找,直到找到不是标点的那个字为止(如每个例子的第一行);
中文遇英文,如果一行容不下则英文直接整段换行(例第二个demo的第二行);
本篇到此结束,如有不足,之后再进行补充。