原文链接: https://juejin.im/post/5b8905456fb9a01a105966b4

white-space、word-break、word-wrap(overflow-wrap)估计是css里最基本又最让人迷惑的三个属性了,我也是用了n次都经常搞混,必须系统整理一下,今天我们就把这三个属性彻底搞清楚!

测试代码

(文末有本文中所有例子的代码)
下面是本文中用于测试三个样式属性展现情况的html代码:

<div id="box">
Hi&nbsp;&nbsp;,
This is a incomprehensibilities long word.
</br>
你好&nbsp;&nbsp;,
这 是一个不可思议的长单词
</div>复制代码

现在只给了它一个宽度和边框,没有其它任何样式,下面是它目前的展现情况:

可以看到,nbsp;</br>可以正常发挥作用,而连续的空格会被缩减成一个(比如This和is之间的三个空格变成了一个),换行符也全都无效。句子超过一行后会自动换行,而长度超过一行的单个单词会超出边界。
接下来我们看下, 给它上面三个css属性赋值后会出现什么变化。

white-space

正如它的名字,这个属性是用来控制空白字符的显示的,同时还能控制是否自动换行。它有五个值:normal | nowrap | pre | pre-wrap | pre-line。因为默认是normal,所以我们主要研究下其它四种值时的展现情况。

(为了方便比较,下文所有图,左侧为normal即初始情况,右侧为赋上相应值时的情况)

先看下white-space:nowrap时的情况:

不仅空格被合并,换行符无效,连原本的自动换行都没了!只有</br>才能导致换行!所以这个值的表现还是挺简单的,我们可以理解为永不换行

white-space:pre

空格和换行符全都被保留了下来!不过自动换行还是没了。保留,所以pre其实是preserve的缩写,这样就好记了。

white-space:pre-wrap

显然pre-wrap就是preserve+wrap,保留空格和换行符,且可以自动换行。

white-space:pre-line

空格被合并了,但是换行符可以发挥作用,line应该是new line的意思,自动换行还在,所以pre-line其实是preserve+new line+wrap

我整理了一个表予以总结:

是否能发挥作用 换行符 空格 自动换行 </br>、nbsp;
normal × ×(合并)
nowrap × ×(合并) ×
pre ×
pre-wrap
pre-line ×(合并)

word-break

从这个名字可以知道,这个属性是控制单词如何被拆分换行的。它有三个值:normal | break-all | keep-all

word-break:keep-all

所有“单词”一律不拆分换行,注意,我这里的“单词”包括连续的中文字符(还有日文、韩文等),或者可以理解为只有空格可以触发自动换行

word-break:break-all

所有单词碰到边界一律拆分换行,不管你是incomprehensibilities这样一行都显示不下的单词,还是long这样很短的单词,只要碰到边界,都会被强制拆分换行。所以用word-break:break-all时要慎重呀。

这样的效果好像并不太好呀,能不能就把incomprehensibilities拆一下,其它的单词不拆呢?那就需要下面这个属性了:

word-wrap(overflow-wrap)

word-wrap又叫做overflow-wrap

word-wrap 属性原本属于微软的一个私有属性,在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

这个属性也是控制单词如何被拆分换行的,实际上是作为word-break的互补,它只有两个值:normal | break-word,那我们看下break-word

终于达到了上文我们希望的效果,只有当一个单词一整行都显示不下时,才会拆分换行该单词
所以我觉得overflow-wrap更好理解好记一些,overflow,只有长到溢出的单词才会被强制拆分换行!

(其实前面的word-break属性除了列出的那三个值外,也有个break-word值,效果跟这里的word-wrap:break-word一样,然而只有Chrome、Safari等部分浏览器支持)

总结

最后总结一下三个属性

  • white-space,控制空白字符的显示,同时还能控制是否自动换行。它有五个值:normal | nowrap | pre | pre-wrap | pre-line
  • word-break,控制单词如何被拆分换行。它有三个值:normal | break-all | keep-all
  • word-wrap(overflow-wrap)控制长度超过一行的单词是否被拆分换行,是word-break的补充,它有两个值:normal | break-word

相信读完了本文,你应该对white-space、word-break、word-wrap有比较系统的认识了吧,如果短时间还是记不住,收藏一下常看看就能记住的XD~如果你喜欢这篇文章的话,希望能点个赞~

以后会定期整理总结一些疑难知识点~欢迎关注~

下面是本文里所有例子的代码的地址,每个属性做成了选项,方便操作学习~

https://codepen.io/YGYOOO/pen/jvyrWK

彻底搞懂word-break、word-wrap、white-space的更多相关文章

  1. 17. Word Break && Word Break II

    Word Break Given a string s and a dictionary of words dict, determine if s can be segmented into a s ...

  2. LeetCode之“动态规划”:Word Break && Word Break II

     1. Word Break 题目链接 题目要求: Given a string s and a dictionary of words dict, determine if s can be seg ...

  3. LeetCode ||& Word Break && Word Break II(转)——动态规划

    一. Given a string s and a dictionary of words dict, determine if s can be segmented into a space-sep ...

  4. leetcode@ [139/140] Word Break & Word Break II

    https://leetcode.com/problems/word-break/ Given a string s and a dictionary of words dict, determine ...

  5. word break和word wrap

    默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...

  6. [LeetCode] Word Break II 拆分词句之二

    Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each ...

  7. 【leetcode】Word Break II

    Word Break II Given a string s and a dictionary of words dict, add spaces in s to construct a senten ...

  8. LeetCode:Word Break II(DP)

    题目地址:请戳我 这一题在leetcode前面一道题word break 的基础上用数组保存前驱路径,然后在前驱路径上用DFS可以构造所有解.但是要注意的是动态规划中要去掉前一道题的一些约束条件(具体 ...

  9. LeetCode Word Break II

    原题链接在这里:https://leetcode.com/problems/word-break-ii/ 题目: Given a string s and a dictionary of words  ...

  10. 【LeetCode OJ】Word Break II

    Problem link: http://oj.leetcode.com/problems/word-break-ii/ This problem is some extension of the w ...

随机推荐

  1. vim 命令行使用技巧

    1. <Ctrl-U> <Ctrl-K> 删除光标到开头的输入 2. <Ctrl-W> 删除最近输入的单词 3. <Ctrl-H> 删除光标之前的一个字 ...

  2. MySQL优化时可以设置的几个参数

    back_log:back_log值指出在MySQL暂时停止回答新请求之前的短时间内多少个请求可以被存在堆栈中.也就是说,如果MySql的连接数据达到max_connections时,新来的请求将会被 ...

  3. instantclient_11_2 连接oracle数据

    (1)首先你要先下载instantclient (解压如下),修改你     instantclient/network/admin/tnsnames.ora 文件,将你oracle的服务器地址写上 ...

  4. java锁之wait,notify(wait会释放锁,notify仅仅只是通知,不释放锁)

    wait是指在一个已经进入了同步锁的线程内,让自己暂时让出同步锁,以便其他正在等待此锁的线程可以得到同步锁并运行,只有其他线程调用了notify方法(notify并不释放锁,只是告诉调用过wait方法 ...

  5. FILE 创建

    public class CreateDelFileUtils implements Serializable{ /** * */ private static final long serialVe ...

  6. java实体类如果不重写toString方法,会如何?

    先认识一下Object Object 类的 toString 方法 返回一个字符串,该字符串由类名(对象是该类的一个实例).at 标记符“@”和此对象哈希码的无符号十六进制表示组成.换句话说,该方法返 ...

  7. AR9331出现connect-debounce failed,port 1 disabled解决方法备忘

    基于AR9331的路由器,自己画的pcb板子,居然出现这个错误,百度下,貌似有不少人遇见过这个错误,可是在改动板子前我的固件用的是没问题的.USB完美使用 改动过板子后出现这个问题! hub 1-0: ...

  8. TP框架的修改,删除

    先把数据库的素具显示出来 public function xiugai() { $code= "n001";//修改的主键值 $n = M("nation"); ...

  9. E - What Is Your Grade?

    E - What Is Your Grade? Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & % ...

  10. EasyNVR无插件摄像机直播之:摄像机网页低延时无插件直播实现

    背景需求 对于摄像机直播,客户反馈的最多就是实现web直播.摆脱插件,可以自定义集成等问题, 对于熟悉EasyNVR已经完美的解决了这些问题.然而对于web播放也存在一些问题,通常我们web播放RTM ...