彻底搞懂word-break、word-wrap、white-space
原文链接: https://juejin.im/post/5b8905456fb9a01a105966b4
white-space、word-break、word-wrap(overflow-wrap)估计是css里最基本又最让人迷惑的三个属性了,我也是用了n次都经常搞混,必须系统整理一下,今天我们就把这三个属性彻底搞清楚!
测试代码
(文末有本文中所有例子的代码)
下面是本文中用于测试三个样式属性展现情况的html代码:
<div id="box">
Hi ,
This is a incomprehensibilities long word.
</br>
你好 ,
这 是一个不可思议的长单词
</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的更多相关文章
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- word break和word wrap
默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...
- [LeetCode] Word Break II 拆分词句之二
Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each ...
- 【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 ...
- LeetCode:Word Break II(DP)
题目地址:请戳我 这一题在leetcode前面一道题word break 的基础上用数组保存前驱路径,然后在前驱路径上用DFS可以构造所有解.但是要注意的是动态规划中要去掉前一道题的一些约束条件(具体 ...
- LeetCode Word Break II
原题链接在这里:https://leetcode.com/problems/word-break-ii/ 题目: Given a string s and a dictionary of words ...
- 【LeetCode OJ】Word Break II
Problem link: http://oj.leetcode.com/problems/word-break-ii/ This problem is some extension of the w ...
随机推荐
- macbook 下SDK Manager 的更新[即使Google被屏蔽了也无所谓]
废话少说,直接说操作步骤: 1. 改动/etc/hosts文件: 右键单击Finder,选择前往目录,输入/private/etc/,敲回车键.将文件/etc/hosts复制到桌面(由于权限受限.无法 ...
- Spring Cloud Zuul 网关的分布式系统中整合Swagger(转)和 zuul跨域访问问题
首先恭喜自己终于找对了努力的方向,很荣幸能在公司接触到微服务架构,也很高兴公司一个大佬哥们愿意带我,他技术确实很牛逼,我也很佩服他,前后端通吃,干了六年能有这样的水平.最近跟着在搞微服务架构,给我分配 ...
- 12 Memcached 缓存无底洞现象
一:Memcached 缓存无底洞现象(1)facebook的工作人员反应的,facebook在2010年左右,memcached节点就已经达到了3000个,存储的数据进千G的数据存储. 他们发现一个 ...
- C语言基础知识【环境设置】
直接使用绿色版的VC++6.0就ok,后期我会写一个具体的使用教程
- Android 热门技术干货
http://mp.weixin.qq.com/s?__biz=MzIwMzYwMTk1NA==&mid=2247484939&idx=1&sn=d1871b09de55ca6 ...
- 自定义tabpageindicator,可以自定义tab是三角形还是矩形,但是tab不具有滑动的功能
我是不会滴,但是看了一些大神写的,我修改了一下,大家可以参照参照 一,自定义Mytabpageindicator,直接贴代码了,具体的在代码中有注释 package com.wangy.mytabpa ...
- springMVC的注释集合
SpringMVC的工作原理 主要核心实现是DispatcherServlet. 一般来讲客户端对服务器发送请求,是由DispatcherServlet控制的,DispatcherServlet接受到 ...
- Visual Studion 2013 HTML 如何打开设计图
Visual Studion 2013 HTML 没有设计视图? 在解决方案中对要打开的HTML文件 右键-->打开方式-->HTML(Web窗体)编辑器 原地址>>:http ...
- 【BZOJ3689】异或之 堆+可持久化Trie树
[BZOJ3689]异或之 Description 给定n个非负整数A[1], A[2], ……, A[n].对于每对(i, j)满足1 <= i < j <= n,得到一个新的数A ...
- 星球大战starwar(并查集)
1015: [JSOI2008]星球大战starwar Time Limit: 3 Sec Memory Limit: 162 MBSubmit: 5253 Solved: 2395[Submit ...