澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

澳门新萄京官方网站:深入理解CSS中的空白符和

2019-08-31 作者:澳门新萄京赌场网址   |   浏览(135)

CSS单词换行and断词,你真的完全了解吗

2016/06/02 · CSS · 换行

原文出处: 澳门新萄京官方网站:深入理解CSS中的空白符和换行,自动换行处理。AlloyTeam   

文本换行其实是个非常常用但并不起眼的特性。你什么都不用设,浏览器自动就会换行。例如英语,浏览器会根据容器尺寸,选择在半角空格或连字符处换行。例如中文,浏览器会选择在文字或标点符号处换行。但有时遇到长单词或URL浏览器就没这么智能了,会出现撑破容器的现象,很难看,如下图
澳门新萄京官方网站 1

---恢复内容开始---

深入理解CSS中的空白符和换行,css符和

×

P标签是默认是自己主动换行的,因此设置好宽度之后,可以较好的实现效果,可是近期的项目中发现,使用ajax载入数据之后。p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,尽管攻克了问题。可是并没有发现本质原因。本质在于,我当时获取的数据是一长串的数字。浏览器应该是对数字和英文单词处理方式相近,不会截断。 
先给出各种方式。再详细介绍每个属性。 
强制不换行 
p { white-space:nowrap; }

背景

某天老板在群里反馈,英文单词为什么被截断了?

澳门新萄京官方网站 2

很显然,这是我们前端的锅,自行背锅。这个问题太简单了,css里加两行属性,分分钟搞定。

1
2
word–break: keep–all;
word–wrap: break–word;

开心的提交代码,刷新页面。我擦,怎么还是没有断词?不可能啊!!! 难道这两个属性有什么兼容性问题或者有什么限制条件?为了不搬石头砸自己的脚,还是去深入了解一下。

容器定宽150px的前提下,普通文字如左图浏览器足以胜任自动换行,右图遇见长单词或URL,浏览器就力不从心了。当然,你能为容器设置overflow:auto;,让滚动条出现,以避免撑破容器。或干脆overflow:hidden;让超出部分隐藏,见下图
澳门新萄京官方网站 3

white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;
white-space 属性设置如何处理元素内的空白
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 br 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

目录

[1]white-space [2]word-wrap [3]word-break

自己主动换行 
p { 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 地址内部进行换行。

看懂了吗?反正我好像没看懂。

看图貌似会好点。

澳门新萄京官方网站 4

澳门新萄京官方网站 5

相信大概能看明白了,我简单总结下:

  1. word-break 当行尾放不下一个单词时,决定单词内部该怎么摆放。
    break-all: 强行上,挤不下的话剩下的就换下一行显示呗。霸道型。
    keep-all: 放不下我了,那我就另起一行展示,再放不下,我也不退缩。傲骄型。
  2. word-wrap 当行尾放不下时,决定单词内是否允许换行
    normal: 单词太长,换行显示,再超过一行就溢出显示。
    break-word: 当单词太长时,先尝试换行,换行后还是太长,单词内还可以换行。
  3. 上面这些换行神马的都是针对英文单词,像CJK(中文/日文/韩文)这样的语言就算了,因为他们不需要,不信你读一下下面的文字

研表究明,汉字的序顺并不定一能影阅响读,比如当你看完这句话后,才发这现里的字全是都乱的。

这样子都可以流畅阅读,更别说断词了…

再回头来看我们的问题,理论上加上了word-break: keep-all;word-wrap: break-word;应该没问题了,看来还有别的坑。

但总感觉overflow不太理想,应该有换行专用的属性。本篇就介绍一下3种换行的属性

word-wrap: normal|break-word;
word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
normal: 只在允许的断字点换行(浏览器保持默认处理)
break-word:在长单词或URL地址内部进行换行
word-break: normal|break-all|keep-all;

前面的话

  CSS3新增了两个换行属性word-wrap和word-break。把空白符和换行放在一起说,是因为实际上空白符是包括换行的,且常用的文本不换行是使用的空白符的属性white-space: nowrap;但到底它们还有些什么属性值,以及有什么对应的用法。本文将就空白符和换行的内容做详细介绍和梳理

 

强制英文单词断行 
p { word-break:break-all; }

空格转换

关键字:   white-space

确认word-break和word-wrap使用方法没有错后,开始检查我们自己的代码。抓包发现,后台同学返回的文本里空格全部以 来代替。
澳门新萄京官方网站 6

what?为什么要用转义字符代替?为什么css不能识别这个转义空格?

澳门新萄京官方网站:深入理解CSS中的空白符和换行,自动换行处理。电话后台同学,告知:在很早之前的为了解决某个前端问题才这么做的。
抓耳挠腮,使劲回忆了下,确实有这么回事。
因为浏览器会自动将多个空格压缩为一个空格显示。为了还原用户的原本输入,才将空格进行html转义。

  1. 很多用户会用空格来换行或者实现宽字间距
  2. 字符画也很好玩,压缩空格就全乱了。不知道字符画的请看下面
    澳门新萄京官方网站 7
    澳门新萄京官方网站 8

专业的字符画制作人员会用全角空格来做,这样就不担心浏览器的空格合并问题了

ok,那 暂时还不能动它。

word-wrap
word-break
white-space
word-wrap
word-wrap能实现断词换行。可设normal,break-word。默认值normal等于没设,不赘述。break-word允许断词换行。如右图设了word-wrap: break-word;后,浏览器的执行过程:发现长单词显示不下,根据默认的换行规则,用半角空格换行,因此Ooops too后面空出了一段空白,长单词移到第二行发现仍旧显示不下,于是断词换行,长单词和URL因此被中间截断。

word-break 属性用来标明怎么样进行单词内的断句。
normal:使用浏览器默认的换行规则。
break-all:允许再单词内换行
keep-all:只能在半角空格或连字符处换行

空白符

定义

  空白符是指空格、制表符和回车;HTML默认已经把所有空白符合并成一个空格。

white-space

  值: normal | nowrap | pre | pre-wrap | pre-line | inherit

  初始值: normal

  应用于: 所有元素

  继承性: 有

normal: 合并空白符,允许自动换行
nowrap: 合并空白符,不允许自动换行
pre-line: 合并空白符(不包括换行符),允许自动换行
pre: 不合并空白符,不允许自动换行
pre-wrap: 不合并空白符,允许自动换行 

  [注意]<pre>元素默认带有样式white-space: pre;

  [注意]IE7-浏览器不支持pre-line和pre-wrap这两个属性值

<div>They can stay 72-hours 
    within the Shandong      province after they have entered China via the Qingdao International Airport.</div>

 

*注意:设置强制将英文单词断行,须要将行内元素设置为块级元素。

为什么浏览器会自动压缩空格?

  1. 规范如此,就是这么任性
  2. 如果不自动压缩空格,那我们写html的时候就只能写成1行了,否则先这样的代码就会出现大段的空白。
  3. XHTML

    <div> <div> bananas </div> </div>

    1
    2
    3
    4
    5
    <div>
    <div>
    bananas
    </div>
    </div>

既然规范这么定了,埋了坑,肯定会想办法让你绕过的,想起了white-space。
white-space我们更多的时候只用到nowrap的属性,来配合实现…的特效,实际它还有更多的姿势未解锁。

white-space: normal | nowrap | pre | pre-wrap | pre-line 我们重点关注pre开头的几个属性。pre是preserve(保留)的缩写。没错,它就跟保留空格有关系。

1
2
white-space: normal | nowrap | pre | pre-wrap | pre-line
我们重点关注pre开头的几个属性。pre是preserve(保留)的缩写。没错,它就跟保留空格有关系。

pre: 保留所有的空格和回车,且不允许折行。
pre-wrap: 保留所有的空格和回车,但是允许折行。
pre-line: 会合并空格,且允许折行

意思简单明了,好像也不用解释什么。

所以我们的解决方案来了:
后台按照用户的输入的原始空格返回,不用做转义,前端加上

CSS

word-break: keep-all; word-wrap: break-word; white-space: pre-wrap;

1
2
3
word-break: keep-all;
word-wrap: break-word;
white-space: pre-wrap;

蹭蹭蹭修改完,貌似没什么问题。澳门新萄京官方网站 9

不过,这些个属性都是作用于Text上的,而我们的页面里有很多都是富文本,如果将pre-wrap作用于富文本上的父节点上也会有同样的功效吗?
带着疑问,测试了几个富文本,果然出现了大段空白….
澳门新萄京官方网站 10

富文本里的html标签之间有空格。

有兴趣的同学可以在

http://www.taoba.com
http://www.qq.com

的body上加上white-space:pre-wrap看看效果。

那富文本的问题要怎么解决呢,黑科技登场了!!

无法反抗,那就享受吧。
既然浏览器会压缩多个空格,那只要保证文本里每次只有一个空格相邻不就可以了。
□ -> □
□□ -> □ 
□□□ -> □ □
□□□□ -> □ □ 
自动规避了浏览器的合并空格策略。

这个思路来自于富文本编辑器,写过富文本编辑器的同学可能会不屑一顾,这个方案我们都用烂了.. 感谢你们!!
(写个富文本编辑器是学习前端的最佳方式,欢迎闲的蛋疼的同学快去踩坑)

通知后台同学按照这个规则来改,问题搞定。

澳门新萄京官方网站 11

---恢复内容结束---

文本换行

  浏览器自身带有文本自动换行的功能,文本容器的右侧可以实现自动换行

  对于英文来说,浏览器会在半角空格或连字符的地方自动换行,而不会在单词的中间突然换行

  对于中文来说,可以在任何一个文字后面换行,但浏览器碰到标点符号时,通常将标点符号以及其前一个文字作为一个整体进行换行

  所以实际上,white-space解决不了长单词或UTL地址的换行问题

word-wrap

  word-wrap属性用来实现长单词或URL地址的自动换行

  值: normal | break-word

  初始值: normal

  应用于: 所有元素

  继承性: 有

word-wrap:normal(浏览器只在半角空格或连字符的地方进行换行)
word-wrap:break-word(截断单词换行,长单词从下一行开始)

  [注意]当white-space的值是nowrap或pre时,word-break和word-wrap属性都失效

  [注意]word-wrap在标准中被改为overflow-wrap,但由于兼容问题,一般还是使用word-wrap

word-break

  CSS3使用word-break属性来决定自动换行的处理方法。通过具体的属性设置,不仅可以让浏览器实现半角空格或连字符后面的换行,而且还可以让浏览器实现任意位置的换行。

  值: normal | break-all | keep-all

  初始值: normal

  应用于: 所有元素

  继承性: 有

normal: 中文到边界上的汉字换行,英文从整个单词换行
break-all: 对于英文长单词来说,会截断单词换行,长单词占据当前行剩余空间。但对于中文的处理,各浏览器不一致
    [1]firefox及safari: 中文到边界上的汉字换行,且允许标点置于段首
    [2]IE及chrome: 中文到边界上的汉字换行,但不允许标点置于段首
keep-all: 对于英文长文本不能换行,但对于中文的处理,各浏览器不一致
    [1]firefox: 在空白符处换行
    [2]IE及chrome: 在空白符及标点处换行
    [3]safari: 不支持

  [注意]移动端目前基本都不支持keep-all值  

  [注意]当word-break值为break-all时,word-wrap属性失效;否则两个属性都起作用

 

超出显示省略号 
p{text-overflow:ellipsis;overflow:hidden;}

总结

  1. word-wrap: 决定句尾放不下单词时,单词是否换行
  2. word-break: 决定单词内该怎么换行
  3. 平文本可以配合white-space: pre-wrap来解决多空格压缩显示问题
  4. 富文本采用的解决方案是对空格进行间隔html转义,这种方法更灵活,可以适应不同的场景,也适用于平文本。

    1 赞 3 收藏 评论

澳门新萄京官方网站 12

word-break
word-break可以设置浏览器自动换行的方式。可设normal,break-all,keep-all。默认值normal等于没设,不赘述。break-all将浏览器的换行模式设为根据容器尺寸允许断词换行。和上面word-wrap: break-word;有什么区别呢?看下图,蓝线部分。

表格

  对于表单元格的长文本来说,使用word-wrap或word-break来强制换行需要设置table-layout:fixed

目录 [1]white-space [2]word-wrap [3]word-break 前面的话 CSS3新增了两个换行属性word-wrap和word-break。把空白符...

white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit; 
white-space 属性设置怎样处理元素内的空白 
normal 默认。空白会被浏览器忽略。

澳门新萄京官方网站 13

 
pre 空白会被浏览器保留。

左图word-wrap的break-word是沿用浏览器默认的换行方式,因此“Ooops too”后面空出了一段空白,上面有解释,不赘述。右图word-break的break-all是改变浏览器默认的换行方式,让浏览器无视半角空格,直接根据容器尺寸换行,因此遇到长单词时,直接断词换行。效果上看word-break: break-all;比word-wrap: break-word;更节省页面空间。

其行为方式类似 HTML 中的 pre 标签。 
nowrap 文本不会换行,文本会在在同一行上继续。直到遇到 br 标签为止。

keep-all不允许断词,在英语系情况下等同于normal,等同于没有设。在中日韩文情况下,normal和keep-all有区别,见下图

 
pre-wrap 保留空白符序列。可是正常地进行换行。 
pre-line 合并空白符序列,可是保留换行符。 
inherit 规定应该从父元素继承 white-space 属性的值。

澳门新萄京官方网站 14

word-wrap: normal|break-word; 
word-wrap 属性用来标明是否同意浏览器在单词内进行断句。这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 
normal: 仅仅在同意的断字点换行(浏览器保持默认处理) 
break-word:在长单词或URL地址内部进行换行 
word-break: normal|break-all|keep-all;

中日韩文情况下,normal仍旧等于没有设,浏览器选择在文字或标点符号处换行。但设成keep-all后,将不再允许断词(哪怕是中日韩文),只能像英语系一样根据半角空格或标点来换行。
white-space

word-break 属性用来标明怎么样进行单词内的断句。 
normal:使用浏览器默认的换行规则。 
break-all:同意再单词内换行 

white-space设置空白符和换行符。可设默认值normal,可设pre, nowrap,pre-line,pre-wrap。效果见下图

keep-all:仅仅能在半角空格或连字符处换行

澳门新萄京官方网站 15

<pre name="code" class="html"><!doctype html>
<html lang="en">
    <head>
    <!--站点编码格式。UTF-8 国际编码。GBK或 gb2312 中文编码-->
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="Keywords" content="关键词一。关键词二">
        <meta name="Description" content="站点描写叙述内容">
        <meta name="Author" content="Yvette Lau">
        <title>Document</title>
        <!--css js 文件的引入-->
        <style>
            .word{background:#E4FFE9;width:250px;margin:50px auto;padding:20px;font-family:"microsoft yahei";}
            /* 强制不换行 */
            .nowrap{white-space:nowrap;}
            /* 同意单词内断句,首先会尝试挪到下一行。看看下一行的宽度够不够,
            不够的话就进行单词内的断句 */
            .breakword{word-wrap: break-word;}
            /* 断句时。不会把长单词挪到下一行。而是直接进行单词内的断句 */
            .breakAll{word-break:break-all;}            
            /* 超出部分显示省略号 */
            .ellipsis{text-overflow:ellipsis;overflow:hidden;}
        </style>
    </head>
    <body>
        <div class = "word">
            <p class = "nowrap">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfs</p>          
            <p class = "breakword">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihui</p>
            <p class = "breakAll">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihuivf</p>
            <p class = "normal">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsa</p>
            <p class = "ellipsis">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsab</p>
        </div>
    </body>
</html>

<div style="white-space: xxx;"> //xxx替换相应的值
Ooops too loooooooooooooooooooooong!

效果例如以下: 
澳门新萄京官方网站 16

首先胜出四场的球队将获得NBA总冠军。
</div>
normal,浏览器默认会忽略多余空白符(要想显示多个空白符,请用 代替空格键)和换行符。

pre会保留空白符和换行符,相当于<pre>标签。要消除第一行这个换行符,常见在HTML端改成下面这样以便去掉多余空行

<div style="white-space: pre;">Ooops too loooooooooooooooooooooong!
首先胜出四场的球队将获得NBA总冠军。
</div>

//或者

<div style="white-space: pre;"><!-- 
--> Ooops too loooooooooooooooooooooong!
首先胜出四场的球队将获得NBA总冠军。
</div>
nowrap和normal的区别是,它不会自动换行。当你用text-overflow属性时需要配合white-space: nowrap;和overflow: hidden;才能起作用

pre-line会忽略多余空白符(要想显示多个空白符,请用 代替空格键),但保留换行符,会自动换行

pre-wrap和pre-line的区别是,它会保留多余空白符

总结
<pre>标签里展示源代码时,遇到有url属性时会很长,导致撑破页面(尤其是移动端),可以用white-space: pre-wrap;加上word-wrap: break-word;

<pre>标签外常见的强制换行方式是overflow:hidden;加上word-wrap: break-word;

强制不换行可以white-space: nowrap;加上word-break: keep-all;

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:澳门新萄京官方网站:深入理解CSS中的空白符和

关键词: