编程开发 购物 网址 游戏 小说 歌词 快照 开发 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 编程 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
移动开发 架构设计 编程语言 互联网 开发经验 Web前端 开发总结
开发杂谈 系统运维 研发管理 数据库 云 计 算 Java开发
VC(MFC) Delphi VB C++(C语言) C++ Builder 其它开发语言 云计算 Java开发 .Net开发 IOS开发 Android开发 PHP语言 JavaScript
ASP语言 HTML(CSS) HTML5 Apache MSSQL数据库 Oracle数据库 PowerBuilder Informatica 其它数据库 硬件及嵌入式开发 Linux开发资料
  编程开发知识库 -> 开发经验 -> word-breakbreak-all和word-wrapbreak-word的区别 -> 正文阅读
 

[开发经验]word-breakbreak-all和word-wrapbreak-word的区别[第1页]

一、CSS是门重经验重积累的学科
下面这张截图是我转发一篇 z-index 相关文章时候的评论,因为我加了一句“学习了”,在我看来其实很正常的,因为我确实不知道 opacity 和 transform 等新属性会影响元素的 z-index 。
CSS的学习,就我个人看来,是有别于JavaScript这张传统程序语言的学习的。本身属性就多,值也多,不同属性在一起表现也不一样,不同属性和不同类型的HTML标签在一起又不一样,再加上兼容性差异和未定义行为。就像是很多个不确定因素,有着无穷多的组合和可能性。掌握这些不确定性,看书是绝对不够的,一定是要多多实践,多多思考,多多积累。对于底层机理的理解,也是需要一定的天赋的。
因此,就是自己很多年一直与CSS密切打交道,学习它,也有很多不知道的,理解不透彻,或者说因为要学习和思考的东西太多,还来不及估计到一些属性或者声明。
比方说本文要介绍的 word-break:break-all 和 word-wrap:break-word , 虽然都有使用,都照过面,实际上,却一直没有机会能够好好看看这两个到底有什么区别,各个浏览器的兼容性如何,等等。换句话说,就是深入理解。
二、了解word-break属性
 展示的语法为:
/* 关键字值 */
word-break: normal;
word-break: break-all;
word-break: keep-all;
/* 全局值 */
word-break: inherit;
word-break: initial;
word-break: unset;
几个关键字值的含义如下:
normal
使用默认的换行规则。
break-all
允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行。
keep-all
不允许CJK(Chinese/Japanese/Korean)文本中的单词换行,只能在半角空格或连字符处换行。非CJK文本的行为实际上和 normal 一致。
其中, break-all 这个值所有浏览器都支持。但是 keep-all 就不这样了,虽然有一定的发展和进步 – Chrome44正式支持了,但是,iOS下的Safari8/9都还不支持(下表黄绿色的表示不支持 keep-all )。换句话说,基本上现在移动端还不适合使用 word-break:keep-all .
上面的兼容性数据最小面那行文字很有意思:
Chrome, Safari and other WebKit/Blink browsers also support the unofficialbreak-word value which is treated like word-wrap: break-word .
翻译成简体中文就是:
Chrome, Safari以及其他WebKit/Blink浏览器还支持费官方标准的 break-word值,其表现就和 word-wrap: break-word 一样。
OK,另外一个男主角登场了, word-wrap .
三、了解word-wrap属性
 展示的语法为:
/* 关键字值 */
word-wrap: normal;
word-wrap: break-word;
/* 全局值 */
word-wrap: inherit;
word-wrap: initial;
word-wrap: unset;
几个关键字值的含义如下:
normal
就是大家平常见得最多的正常的换行规则。
break-word
一行单词中实在没有其他靠谱的换行点的时候换行。
word-wrap 属性其实也是很有故事的,之前由于和 word-break 长得太像,难免会让人记不住搞混淆,晕头转向,于是在CSS3规范里,把这个属性的名称给改了,叫做: overflow-wrap . 哎呀,这个新属性名称显然语义更准确,也更容易区别和记忆。
但是呢,恕我赵某咳两声,也就Chrome/Safari等WebKit/Blink浏览器支持。
所以,虽然换了个好看好用的新名字,为了兼容使用,目前,还是乖乖使用 word-wrap 吧。兼容性见下表(黄绿色的表示不支持 overflow-wrap 新的标准属性的):
四、回归重点,word-break:break-all和word-wrap:break-word的区别
尼玛,说这两个声明不是兄弟都没人信,都有 word 都有 break ,位置都还一样,一个有2个 break , 一个有2个 word , 妥妥儿的用来迷惑大家的。我是花了好多年才没有把这两个记混淆,之前,每次用到都要查一下,晕死人的要~
这两个声明都能是连续英文字符换行,那区别在哪里呢?
您可以狠狠地点击这里: 
会发现类似下图的效果:
可以发现, word-break:break-all 正如其名字,所有的都换行。毫不留情,一点空隙都不放过。而 word-wrap:break-word 则带有怜悯之心,如果这一行文字有可以换行的点,如空格,或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的,则就不打英文单词或字符的主意了,让这些换行点换行,至于对不对齐,好不好看,则不关心,因此,很容易出现一片一片牛皮癣一样的空白的情况。
OK, 应该很容易get这个tips的。
至于如何记忆这两个CSS声明呢?
首字母走起:wbba(微博吧), wwbw(我五百万).
五、结束语,扯下word-spacing和white-space
word-spacing 是单词之间间距的, white-space 是字符是否换行显示的。
OK,困了,不展开了。
最后,问大家一个问题……
背景
某天老板在群里反馈,英文单词为什么被截断了? 
很显然,这是我们前端的锅,自行背锅。这个问题太简单了,css里加两行属性,分分钟搞定。
1
2
word-break: keep-all;
word-wrap: break-word;
开心的提交代码,刷新页面。我擦,怎么还是没有断词?不可能啊!!! 难道这两个属性有什么兼容性问题或者有什么限制条件?为了不搬石头砸自己的脚,还是去深入了解一下。
css单词断词、换行
关键字: word-break,  word-wrap
提前声明:上面的问题用这两个属性来解决并没有什么问题,这里只是再加深巩固一下知识。想了解原因的同学请直接看下一小节。
word-break, word-wrap这两个属性都比较常见,断词、溢出显示省略号等常见功能都需要用到它们。但具体它们分别是什么意思,各自有什么属性,可能很多人都不是很清楚。反正我不懂。每次都是从网上查一查就用上了,两个属性长得太像了,总是记不住。
来,先看文档。
1
word-break: normal | break-all | keep-all;
normal 使用浏览器默认的换行规则。 
break-all 允许在单词内换行。 
keep-all 只能在半角空格或连字符处换行。
1
word-wrap: normal | break-word;
normal 只在允许的断字点换行(浏览器保持默认处理)。 
break-word 在长单词或 URL 地址内部进行换行。
看懂了吗?反正我好像没看懂。
看图貌似会好点。
相信大概能看明白了,我简单总结下:
1.           word-break 当行尾放不下一个单词时,决定单词内部该怎么摆放。 
break-all: 强行上,挤不下的话剩下的就换下一行显示呗。霸道型。 
keep-all: 放不下我了,那我就另起一行展示,再放不下,我也不退缩。傲骄型。
2.           word-wrap 当行尾放不下时,决定单词内是否允许换行 
normal: 单词太长,换行显示,再超过一行就溢出显示。 
break-word: 当单词太长时,先尝试换行,换行后还是太长,单词内还可以换行。
3.           上面这些换行神马的都是针对英文单词,像CJK(中文/日文/韩文)这样的语言就算了,因为他们不需要,不信你读一下下面的文字
研表究明,汉字的序顺并不定一能影阅响读,比如当你看完这句话后,才发这现里的字全是都乱的。
这样子都可以流畅阅读,更别说断词了…
再回头来看我们的问题,理论上加上了word-break: keep-all;word-wrap: break-word;应该没问题了,看来还有别的坑。
空格转换
关键字:   white-space
确认word-break和word-wrap使用方法没有错后,开始检查我们自己的代码。抓包发现,后台同学返回的文本里空格全部以 来代替。 
what?为什么要用转义字符代替?为什么css不能识别这个转义空格?
电话后台同学,告知:在很早之前的为了解决某个前端问题才这么做的。 
抓耳挠腮,使劲回忆了下,确实有这么回事。 
因为浏览器会自动将多个空格压缩为一个空格显示。为了还原用户的原本输入,才将空格进行html转义。
1.           很多用户会用空格来换行或者实现宽字间距
2.           字符画也很好玩,压缩空格就全乱了。不知道字符画的请看下面 
专业的字符画制作人员会用全角空格来做,这样就不担心浏览器的空格合并问题了
ok,那 暂时还不能动它。
为什么浏览器会自动压缩空格?
1.           规范如此,就是这么任性 
2.           如果不自动压缩空格,那我们写html的时候就只能写成1行了,否则先这样的代码就会出现大段的空白。
3.   
1
2
3
4
5
<div>
<div>
bananas
</div>
</div>
既然规范这么定了,埋了坑,肯定会想办法让你绕过的,想起了white-space。
white-space我们更多的时候只用到nowrap的属性,来配合实现…的特效,实际它还有更多的姿势未解锁。
1
2
white-space: normal | nowrap | pre | pre-wrap | pre-line 
我们重点关注pre开头的几个属性。pre是preserve(保留)的缩写。没错,它就跟保留空格有关系。
pre: 保留所有的空格和回车,且不允许折行。 
pre-wrap: 保留所有的空格和回车,但是允许折行。 
pre-line: 会合并空格,且允许折行
意思简单明了,好像也不用解释什么。
所以我们的解决方案来了: 
后台按照用户的输入的原始空格返回,不用做转义,前端加上
1
2
3
word-break: keep-all;
word-wrap: break-word;
white-space: pre-wrap;
蹭蹭蹭修改完,貌似没什么问题。
不过,这些个属性都是作用于Text上的,而我们的页面里有很多都是富文本,如果将pre-wrap作用于富文本上的父节点上也会有同样的功效吗? 
带着疑问,测试了几个富文本,果然出现了大段空白…. 
富文本里的html标签之间有空格。
有兴趣的同学可以在
的body上加上white-space:pre-wrap看看效果。
那富文本的问题要怎么解决呢,黑科技登场了!!
无法反抗,那就享受吧。 
既然浏览器会压缩多个空格,那只要保证文本里每次只有一个空格相邻不就可以了。 
□ -> □ 
□□ -> □&nbsp; 
□□□ -> □&nbsp;□ 
□□□□ -> □&nbsp;□&nbsp; 
自动规避了浏览器的合并空格策略。
这个思路来自于富文本编辑器,写过富文本编辑器的同学可能会不屑一顾,这个方案我们都用烂了.. 感谢你们!! 
(写个富文本编辑器是学习前端的最佳方式,欢迎闲的蛋疼的同学快去踩坑)
通知后台同学按照这个规则来改,问题搞定。
总结
1.           word-wrap: 决定句尾放不下单词时,单词是否换行
2.           word-break: 决定单词内该怎么换行
3.           平文本可以配合white-space: pre-wrap来解决多空格压缩显示问题
4.           富文本采用的解决方案是对空格进行间隔html转义,这种方法更灵活,可以适应不同的场景,也适用于平文本。
  开发经验 最新文章
Java 9 中的 GC 调优基础
Java9之HttpClientAPI实战详解
TeamFlowy——结合Teambition与Workflowy
深度思考Spark Runtime机制
jQuery实现放大镜效果
疯狂Spring Cloud连载(六)——负载均衡框
JavaWeb学习总结——JavaMail发送邮件
GZIP压缩解压类
git常用命令
appach 和tomcat 之间的关系(1)
上一篇文章      下一篇文章      查看所有文章
加:2017-02-22 12:45:47  更:2017-02-22 12:49:40 
VC(MFC) Delphi VB C++(C语言) C++ Builder 其它开发语言 云计算 Java开发 .Net开发 IOS开发 Android开发 PHP语言 JavaScript
ASP语言 HTML(CSS) HTML5 Apache MSSQL数据库 Oracle数据库 PowerBuilder Informatica 其它数据库 硬件及嵌入式开发 Linux开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 新闻资讯 小游戏 Chinese Culture 股票 三丰软件 开发 中国文化 网文精选 阅读网 看图 日历 万年历 2018年10日历
2018-10-19 1:02:12
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  编程开发知识库