css - overflow-wrap、word-wrap、word-break、white-space 使用总结

示例

除了特别说明外,文章展示效果均以以下示例作为基底说明

<style>
    div {
      width: 80px;
      background: yellowgreen;
    }
</style>
<div>
    nice ojbkkkkkkkk aa
</div>

效果:

可以看到在默认情况下,有两个比较需要注意的地方
1、在一行内,当最后一个单词无法完整放下,这个单词会放到下一行去
2、在一行内,如果只有一个单词,且该单词的长度已经超过容器的长度,单词末尾部分的字母只会溢出容器,而不会放到下一行

这两种现象有时候并不是我们想要的,特别是第二种现象

overflow-wrap、word-wrap

两者效果等同,只不过 overflow-wrap 是 CSS3 里的属性,用来取代 word-wrap,但在开发时,为了兼容性,应该都写上两者。文章均以 overflow-wrap 为代表说明其作用。

描述
normal只允许在断字点换行,默认值
break-word允许在长单词或 URL 地址内部进行换行

添加样式 overflow-wrap: break-word

<style>
    div {
      width: 80px;
      background: yellowgreen;
      overflow-wrap: break-word;
    }
</style>

效果:

1、由于 nice 后面搭配了 ojbk(后面的k省略说明)会让 ojbk 难以完整与 nice 同行,所以 nice 后面直接换行,让 ojbk 显示在下一行。
2、ojbk 的宽度本来就大于容器的宽度,后面的 k 只能显示到下一行
3、aa 可以完整放到第三行

得到结论:
overflow-wrap: break-word 的作用
1、若行内的最后的一个单词如果无法完整放下,则直接将整个单词放到下一行
2、若这个单词的宽度大于容器的宽度,则将多余的字母放到下一行

word-break

描述
normal使用浏览器默认的换行规则。
break-all允许在单词内换行。
keep-all只能在半角空格或连字符处换行。

添加样式 word-break: break-all

<style>
    div {
      width: 80px;
      background: yellowgreen;
      overflow-wrap: break-word; // 这个可不写
      word-break: break-all;
    }
</style>

效果:

可以看到 nice 和 ojbk 是同行,而 ojbk 多出的字母部分放到第二行
得到结论:
word-break: break-all 的作用
1、若行内的最后一个单词无法完整放下,则多余的字母放到下一行

当 word-break 值为 keep-all
不允许CJK(Chinese/Japanese/Korean)文本中的单词换行,只能在半角空格或连字符处换行。
由于这里要更换 CJK 语言,因此用新例子展示效果

<style>
    div {
      width: 80px;
      background: yellowgreen;
    }
</style>
<div>
    我你他,我你他
</div>


可以看到在默认情况下,就有 word-break: break-all 的类似效果,实际上 word-break: break-all 和 overflow-wrap: break-word 是针对非 CJK 语言,word-break: keep-all 是针对 CJK 语言。

添加样式 word-break: keep-all

<style>
    div {
      width: 80px;
      background: yellowgreen;
      word-break: keep-all;
    }
</style>


逗号后面直接换行,第二个的“我你他”被放到了第二行
得到结论:
break-word: keep-all 的作用
1、断句的标准是根据标点符号来进行,效果与 overflow-wrap: break-word 类似,只是针对的语言不同

overflow-wrap 和 word-break 的优先级

虽然在标准上的定义,overflow-wrap 是控制是否允许断句,而 word-break 是控制怎样断句,但上述例子很明显,overflow-wrap 也有断句作用。

那么两者的优先级是怎样的?我们先看下以下实践情况。
1、在 word-break 非 break-all 的情况下,overflow-wrap: break-word 才会起到自身的断句作用。
2、在 word-break 为 break-all 的情况下,overflow-wrap: break-word 不会起到自身的断句作用。
3、word-break: keep-all 只针对 CJK 语言,不在讨论范围内
也即是说针对非 CJK 语言, word-break 的断句作用优先级大于 overflow-wrap

white-space

white-space 用于控制设置如何处理元素内的空白

描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。

当 white-space 设置了 nowrap,overflow-wrap 和 word-break 就没有任何用处了,因为文本被强制显示为一行了。

总结

overflow-wrap(word-wrap) 和 word-break 都可以起到断句作用,对于非 CJK 语言的断句,word-break 的优先级更高。

是不是有人和我一样疑惑,为什么不直接在 word-break 定义一个可以起到 overflow-wrap: break-word 效果的新属性值?overflow-wrap 属性是不是多此一举?相信很多人都被这两个属性搞得头晕眼花。
很奇怪的是,明明在标准上,word-break 只有三个属性值,在 chrome 里输入时发现有 break-word 值,而且该效果和 overflow: break-word 效果一样。

image.png

而且为什么 CJK 语言的断句作用和非 CJK 语言的断句作用放到同一个属性(word-break)里面,若设置了word-break: keep-all,那不就无法同时设置 word-break: break-all ?CJK 语言和非 CJK 语言不应该产生冲突。

没有深究这两个问题,也许上述的问题都是历史遗留下来。

参考

https://www.cnblogs.com/yingz...
https://www.jianshu.com/p/53d

共同进步

欢迎大家点赞、关注、收藏、分享
若文章有错漏,请各位在评论区指正
ฅ(`・ω・´)ฅ


前端
本喵专注于前端技术,不定期更新优质前端文章,欢迎关注~

喜欢搞机,喜欢写bug,喜欢炒老板鱿鱼......

26 声望
0 粉丝
0 条评论
推荐阅读
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs40阅读 4.8k评论 5

封面图
ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -&gt; Preference-&gt; Settings(如果装了中文插件包应该是 文件 -&gt; 选项 -&gt; 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.8k评论 9

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco24阅读 2.3k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan25阅读 1.7k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
【代码鉴赏】简单优雅的JavaScript代码片段(一):异步控制
Promise.race不满足需求,因为如果有一个Promise率先reject,结果Promise也会立即reject;Promise.all也不满足需求,因为它会等待所有Promise,并且要求所有Promise都成功resolve。

csRyan26阅读 3.4k评论 1

「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图

喜欢搞机,喜欢写bug,喜欢炒老板鱿鱼......

26 声望
0 粉丝
宣传栏