网站首页 » 前端开发 » div+css » 文字换行处理 word-wrap word-break white-space 用法及区别
上一篇:
下一篇:

文字换行处理 word-wrap word-break white-space 用法及区别

作为前端的你,浏览器默的文字处理方式估计不用我再多说一句了。这里有两种情况我们需要知道的,但在实际中出现的机率不大,请看图:

文字换行处理 word-wrap word-break white-space 用法及区别

前面的换行是因为我加了<br>标签,第一行我们不用管,只需关注第二行文字,第二行文字为什么会超出盒子?

我猜:在处理文字的时候浏览器会把它们看成一个整体(如:单词),并且不会拆分它们,一行又显示不完全,那怎么办呢?只能像上面那样处理了。于是就会出现了上面不不堪入目的场面。

那我们岂不是可以认为浏览器默认就是用word-wrap:break-word来处理文字吗?但当你给元素手动添加该属性后,你会看到你不想看到的结果,上面的一长串字符竟然被无情的截断了。那上面的猜测就不对了呀,别急,现在我们再来看看这种非常合理的情况,我去搜索了一个目前世界上最长的英文单词:pneumonoultramicroscopicsilicovolcanoconiosis,长得难以自信,一共有45个字母。虽然你被公认为世界上最长的英文单词,但不好意思,word-wrap:break-word属性却不认为你是一个单词,活生生地就把你拦腰截断。下面是化妆后的效果图:

总结:我个人觉得浏览器的默认的处理要比 word-wrap:break-word处理得更原生,虽然也有过,但功大于过,毕竟它认可了世界上最长的英文单词的地位。word-wrap:break-word属性可以处理一般情况,但不能处理极端的情况(如:辨别不出世界上最长的英文单词),但它这种缺陷对我们平时的使用不会造成不便,所以平时的开发中可以放心使用它。

word-wrap

word-wrap 允许单词或 URL 地址换行到下一行(不破坏英文单词的完整性)。

可用属性值:

描述
normal 只在允许的断字点换行(浏览器保持默认处理)。
break-word 以单词为最小单元,进行换行(保留英文单词完整性)。
授课时间

word-wrap:break-word其实跟normal值差作用不多,只不过word-wrap:break-word除了像normal那样处理正常的文字外,还会对纯字母和纯数字的字符串以及世界公认最长的英文单词强制进行换行处理,而normal则不会处理这三种情况。

我们来看看下面的这个图:

url 不换行

图中例子 1 实现了url 链接整体换行的效果,但例子 2 中就失败了。

分析:首先上面的两个小例子都是在浏览器默认行为下进行的,没有加任何样式。为什么第二个例子链接换行了?我想说的是其实例子1中也会像例子2那样换行的,只是例子1幸运的躲过一劫。不信?你试着在链接前面适当加减几个中文,效果就会跟例子2一样了。

文字换行处理 word-wrap word-break white-space 用法及区别

不难看出:

1.浏览把链接当成英文来处理了,所以会在“-”处换行(包括但不限于-、_、~、#等都会进行换行)。

2.当链接中不含有“-”等符号时,是可以一行显示的,所以 URL 不换行也是有前提的。

当你给元素添加word-wrap:break-word;属性,效果没变化跟浏览器默认下是一样的,这说明之前的猜测基本成立。那如果我想实现链接不管如何都不换行要怎么做呢?方法也不是没有的,给元素添加word-break:keep-all;样式,并且用【】等符号包裹起来。最重要的是文字必需得是中文。请看下图效果:

文字换行处理 word-wrap word-break white-space 用法及区别

需要注意的是例子4 中英文跟中文之间有一个空格,如果你把这个空格删掉,那么就会在“-” 后面换行。

兼容性

word-break

word-break 属性规定自动换行的处理方法。

可用属性值:

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

break-all不管三七二十一,只要碰到了盒子边缘就会强制换行,中文不影响,英文单词强行切割进行换行,即允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行。

keep-all针对半角字符如()、【】、[],为了保留文字完整性,在这些字符之间的文字不会换行。其它情况以逗号或者句号等符号进行换行(注意:如果两个逗号之间的文字(中文)一行容不下,那么会另起一行或者另起一行且不换行,这个特性在()、【】、[] 等符号内均起作)。这个属性只对中文/日文/韩文有效,non-CJK(非中文/日文/韩文)跟 normal  效果一样。

兼容性

white-space

规定如何处理空格和回车。

可用属性值:

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

pre保留行首空白字符,保留换行符(回车键),文字不换行,除非遇到<br> 换行符。

pre-wrap保留行首空白字符,保留换行符(回车键),文字按浏览器默认行为进行正常换行。

pre-line不保留行首空白字符,但保留换行符(回车键),文字按浏览器默认行为进行正常换行。

nowrap不保留行首空白字符,不保留换行符(回车键),文字不换行,除非遇到<br>换行符,。

我想你已经对它们有些印象了。但其中有两个word-break:break-allword-wrap:break-word可能还需要注意下。word-break:break-all,就是不管你长得怎么样,只要碰到盒子边缘即使是一个完整的单词也给你切割进行强行换行。而 word-wrap:break-word 就相对客气些,不对完整的单词进行切割,而是把挤不下的单词另起一行。

于是上面的链接不换行在这里也有了更直接的方法white-space:nowrap 请看图:

white-space:nowrap 效果

不管是长是短,统统都给你在一行里显示。不过如果链接是在文章中的,而你又想保证链接的完整性,那么之前的方法可能会更好。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/word-wrap-word-break-white-space-usage-and-difference/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END