word-break 和 word-wrap 的区别

本文主要要介绍的是 CSS 中 word-break: break-allword-wrap: break-word 的区别,虽然这两个属性都有使用过,但都是属于使用时查一查文档随手就用,用完了也不会深入去探究的范畴,希望借着这篇文章来深入的探究一下这两者的区别。

有一句话是“没图说个 xx”,我觉得这句话在探究 CSS 时特别正确。先让我们来看一张图:

上面的图是同一段 HTML 代码由不同的 CSS 控制产生的效果,大家能猜到具体是哪些 CSS 值吗?答案在 https://jsfiddle.net/elvinn/88p8v4o3/ 中,可以去看看猜的对不对 ^_^ 如果猜对了的话,那么可以残忍地关闭这篇文章了;不过假如没有猜对的话,那么不妨和我一起来探究一番吧。

word-break

word-break 在 MDN 上的官方解释是 specifies whether or not the browser should insert line breaks wherever the text would otherwise overflow its content box,翻译一下就是它决定了当文本要溢出容器时,浏览器是否应该插入换行符避免溢出,它有下列值:

word-break: normal;
word-break: break-all;
word-break: keep-all;

/* 全局属性 */
word-break: inherit;
word-break: initial;
word-break: unset;

我们只需要关注前三个值:normalbreak-all、和 keep-all,具体介绍如下:

  • normal:CJK(即 Chinese/Japanese/Koean,中日韩) 文本插入断行,其它文本不插入断行,如下图中 1 所示;
  • break-all:所有文本都会插入断行,如下图中 2 所示;
  • keep-all:所有文本都不会插入断行,如下图中 3 所示(该值在移动端低版本浏览器上不支持)。

word-wrap

word-wrap 在 MDN 上的官方解释是 specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box,把这个和 word-break 的解释对比,可以发现基本一模一样,只是多了 within words 两个单词进行了限制,也就是说它只能控制是否在单词内加入断行,它有下列值:

word-wrap: normal;
word-wrap: break-word;

/* 全局属性 */
word-wrap: inherit;
word-wrap: initial;
word-wrap: unset;

我们只需要关注前两个值:normalbreak-word,具体介绍如下:

  • normal:不会在非 CJK 单词中插入断行,如下图中 1 所示;
  • break-word: 会在单词中插入断行避免溢出,如下图中 2 所示。

也许 W3C 也觉得 word-breakword-wrap 这两个属性名字实在是太相似了吧,所以在 CSS3 规范里把 word-wrapoverflow-wrap 重命名了,不过目前浏览器支持不是很好,所以还是乖乖地使用 word-wrap 吧。

word-break 和 word-wrap 的区别

终于来到本文的重点了!一开始看到 word-break: break-allword-wrap: word-break 就头大,这也太相像了,一共就四个单词,结果还有三个单词都是一样的,效果看上去也好像没什么区别,也难怪 W3C 要给 word-wrap 换个名字了。那说回正题,区别在哪里呢??

俗话说的好,一图胜千言。在上图中,我们可以清楚地看到,word-break: break-all 值如其名,断开一切,利用上每一块可以利用的空间来塞下文本,避免铺张浪费;而 word-wrap: word-break 则收敛许多,假如一行文字有可以换行的点,如标点、CJK 文本等,那么就不会在英文单词或者字符中插入断行了,不过从显示效果来说的话则容易一块儿密集、一块儿空白,很不美观。

white-space 大佬

前面说了这么多 word-breakword-wrap 的值的作用,显得它们很厉害的样子。不过实际上它们受 white-space 大佬管辖,它的默认值为 normal 时可以允许 word-breakword-wrap 发挥作用,不过当它的值设为 nowrap 时,就会不允许换行,导致所有的文本都挤在一行之中,如下图所示。

参考链接

  1. 张鑫旭 - word-break:break-all和word-wrap:break-word的区别
  2. MDN- word-break
  3. MDN - overflow-wrap

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏python爬虫日记

wxpython 窗口排版- proportion/flag/border参数说明

新学习wxpython,一直纠结于窗口控件的排版,经过几天的查资料、试验,总结如下。

613
来自专栏有趣的django

PYTHON面试

大部分的面试问题,有最近要找事的老铁吗?  python语法以及其他基础部分 可变与不可变类型;  浅拷贝与深拷贝的实现方式、区别;deepcopy如果你来...

4017
来自专栏儿童编程

Python常用函数汇总(数据结构、文件类)

Python提供了大量处理各类数据结构(字符串、列表、元组、字典)及文件类(包括文件夹)的函数,为我们进行相关操作提供了极大的便利。

921
来自专栏技术小黑屋

探究Kotlin的局部方法

在Kotlin中,定义方法很有趣,不仅仅因为方法的关键字是fun(function前几个字符),还是因为你会惊奇的发现,它允许我们在方法中定义方法。如下

733
来自专栏HTML5学堂

乐视网面试真题,非一般的题目

正文 HTML5学堂:这是一套2014年7月份乐视网的一份面试真题,虽然面试题目还算比较简单,但也很能反应面试者基础知识的掌握程度,特别是面试者对细节方面的处理...

3568
来自专栏恰同学骚年

设计模式的征途—23.解释器(Interpreter)模式

虽然目前计算机编程语言有好几百种,但有时人们还是希望用一些简单的语言来实现特定的操作,只需要向计算机输入一个句子或文件,就能按照预定的文法规则来对句子或文件进行...

692
来自专栏逆向与安全

菜鸟 学注册机编写之 “MD5”

sc_office_2003_pro 高手不要见笑,仅供小菜玩乐,有不对或不足的地方还请多多指教,不胜感激!   

640
来自专栏Golang语言社区

Go-List

要点 Element表示链表的一个元素,List表示链表 访问元素的值: .Value list是双向链表,可以在指定的位置插入元素 初始化: New()。——...

2829
来自专栏nummy

reStructuredtext快速入门

reStructuredText是一种reStructuredText是一种轻量级的文本标记语言,简单易读,所见即所得的文本标记语言。

552
来自专栏我有一个梦想

Python 项目实践二(下载数据)第三篇

接着上节继续学习,在本章中,你将从网上下载数据,并对这些数据进行可视化。网上的数据多得难以置信,且大多未经过仔细检查。如果能够对这些数据进行分析,你就能发现别人...

2095

扫码关注云+社区