您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:换行知多少,文本换行word

新葡亰496net:换行知多少,文本换行word

发布时间:2019-08-03 21:18编辑:新葡亰官网浏览(105)

    word-break:break-all 和 word-wrap:break-word 的区别

    2015/11/19 · CSS · 2 评论 · word-break

    原文出处: 张鑫旭   

    word-wrap :

    word-wrap :

    CSS3中的word-wrap、word-break、white-space想必大家都接触过,今天我们来一起温故而知新。

    本文同步至微信公众号:

    一、CSS是门重经验重积累的学科

    下面这张截图是我转发一篇z-index相关文章时候的评论,因为我加了一句“学习了”,在我看来其实很正常的,因为我确实不知道opacitytransform等新属性会影响元素的z-index

    新葡亰496net 1

    CSS的学习,就我个人看来,是有别于JavaScript这张传统程序语言的学习的。本身属性就多,值也多,不同属性在一起表现也不一样,不同属性和不同类型的HTML标签在一起又不一样,再加上兼容性差异和未定义行为。就像是很多个不确定因素,有着无穷多的组合和可能性。掌握这些不确定性,看书是绝对不够的,一定是要多多实践,多多思考,多多积累。对于底层机理的理解,也是需要一定的天赋的。

    因此,就是自己很多年一直与CSS密切打交道,学习它,也有很多不知道的,理解不透彻,或者说因为要学习和思考的东西太多,还来不及估计到一些属性或者声明。

    比方说本文要介绍的word-break:break-allword-wrap:break-word, 虽然都有使用,都照过面,实际上,却一直没有机会能够好好看看这两个到底有什么区别,各个浏览器的兼容性如何,等等。换句话说,就是深入理解。

    首先提一下,word-wrap 这个 CSS 属性在CSS3中已经被更名为 overflow-wrap,这样语义化也是为了避免与 word-break 混淆;

    首先提一下,word-wrap 这个 CSS 属性在CSS3中已经被更名为 overflow-wrap,这样语义化也是为了避免与 word-break 混淆;

    当我们在网站编辑文章的时候难免会遇到文字过长导致溢出的情况,仔细观察会发现是我们的CSS没加文字截断,然后加上word-break:break-all就搞定了。下面给大家介绍CSS3中控制文字换行的三个属性:

    对于后续文章感兴趣的可以添加关注:

    二、了解word-break属性

    MDN上展示的语法为:

    CSS

    /* 关键字值 */ word-break: normal; word-break: break-all; word-break: keep-all; /* 全局值 */ word-break: inherit; word-break: initial; word-break: unset;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* 关键字值 */
    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.新葡亰496net 2

    上面的兼容性数据最小面那行文字很有意思:

    Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.

    翻译成简体中文就是:

    Chrome, Safari以及其他WebKit/Blink浏览器还支持费官方标准的break-word值,其表现就和word-wrap: break-word一样。

    OK,另外一个男主角登场了,word-wrap.

    • Reference:
      • The overflow-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.
      • 这货就是在行尾放不下一个单词的时候,决定单词内部是不是允许换行的家伙;
    • Values:
      • normal:
        • 单词太长,我就换行试下,结果换行以后还长,这货就撂挑子不干了,劳资不给换了,直接暴力地给你戳出来。
        • 新葡亰496net 3
      • break-word:
        • 单词太长,就换行,换行以后还是长,咱就再换,老好人,换到你满意;
        • 新葡亰496net 4
    • Reference:
      • The overflow-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.
      • 这货就是在行尾放不下一个单词的时候,决定单词内部是不是允许换行的家伙;
    • Values:
      • normal:
        • 单词太长,我就换行试下,结果换行以后还长,这货就撂挑子不干了,劳资不给换了,直接暴力地给你戳出来。
        • 新葡亰496net 5
      • break-word:
        • 单词太长,就换行,换行以后还是长,咱就再换,老好人,换到你满意;
        • 新葡亰496net 6

    新葡亰496net 7

    新葡亰496net 8

    三、了解word-wrap属性

    MDN上展示的语法为:

    CSS

    /* 关键字值 */ word-wrap: normal; word-wrap: break-word; /* 全局值 */ word-wrap: inherit; word-wrap: initial; word-wrap: unset;

    1
    2
    3
    4
    5
    6
    7
    8
    /* 关键字值 */
    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新的标准属性的):新葡亰496net 9

     

     

    一、word-wrap

    文中有些地方没显示全,查看全部内容,请点击上面的原文链接哈

    四、回归重点,word-break:break-all和word-wrap:break-word的区别

    尼玛,说这两个声明不是兄弟都没人信,都有word都有break,位置都还一样,一个有2个break, 一个有2个word, 妥妥儿的用来迷惑大家的。我是花了好多年才没有把这两个记混淆,之前,每次用到都要查一下,晕死人的要~

    新葡亰496net 10

    这两个声明都能是连续英文字符换行,那区别在哪里呢?

    您可以狠狠地点击这里:word-break:break-all和word-wrap:break-word的区别demo

    会发现类似下图的效果:
    新葡亰496net 11

    可以发现,word-break:break-all正如其名字,所有的都换行。毫不留情,一点空隙都不放过。而word-wrap:break-word则带有怜悯之心,如果这一行文字有可以换行的点,如空格,或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的,则就不打英文单词或字符的主意了,让这些换行点换行,至于对不对齐,好不好看,则不关心,因此,很容易出现一片一片牛皮癣一样的空白的情况。

    OK, 应该很容易get这个tips的。

    至于如何记忆这两个CSS声明呢?

    首字母走起:wbba(微博吧), wwbw(我五百万).



    1、定义

    在对页面内容进行排版的时候,不可避免的会遇到对文本进行处理的问题。今天整理了文本换行相关的内容,记录下来分享之。毕竟,好记性不如烂笔头嘛。

    五、结束语,扯下word-spacing和white-space

    word-spacing是单词之间间距的,white-space是字符是否换行显示的。

    OK,困了,不展开了。

    最后,问大家一个问题……

    大家有没有觉得……

    下面这张图……

    新葡亰496net 12

    长得很像……尔康?

    新葡亰496net 13

    1 赞 2 收藏 2 评论

    新葡亰496net 14

    word-break:

    word-break:

    word-wrap 属性允许长单词或 URL 地址换行到下一行。

    对于文本换行,自己之前也处理过相关的问题。知道要用到word-wrap,word-break和white-space等相关的样式规则。然而对于它们三个之前到底有什么区别,还说不清楚。本着理论与实践相结合实事求是的原则,今天抽时间看了下。

    • Reference :
      • The word-break CSS property is used to specify whether to break lines within words.
      • 这货是用来决定在单词内怎么换行的;
    • Values:
      • Normal:
        • 使用默认的换行规则
        • 新葡亰496net 15
      • break-all:
        • 允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行。
        • 新葡亰496net 16
      • keep-all:
        • 不允许CJK(Chinese/Japanese/Korean)文本中的单词换行,只能在半角空格或连字符处换行。非CJK文本的行为实际上和normal一致。
        • 新葡亰496net 17
    • Reference :
      • The word-break CSS property is used to specify whether to break lines within words.
      • 这货是用来决定在单词内怎么换行的;
    • Values:
      • Normal:
        • 使用默认的换行规则
        • 新葡亰496net 18
      • break-all:
        • 允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行。
        • 新葡亰496net 19
      • keep-all:
        • 不允许CJK(Chinese/Japanese/Korean)文本中的单词换行,只能在半角空格或连字符处换行。非CJK文本的行为实际上和normal一致。
        • 新葡亰496net 20

    2、语法和参数

    在mozilla官网上搜word-wrap会得到如下解释:

     

     

    word-wrap:normal(默认)|break-word normal:允许内容顶开指定的容器边界,如果单词超长,会冲出边界(在当前行显示,不会换行)。 break-word: 内容将在边界内换行,当单词在当前行放不下时,会自动切换到下一行,必要时会触发word-break(注意:请分辨清楚word-break和break-word这俩个是不同的东西,一为属性另为参数)。 注:各个浏览器均能识别。

    The word-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.



    3、说明

    word-break的解释:

    word-wrap:break-word VS word-break:break-all

    word-wrap:break-word VS word-break:break-all

    word-wrap是控制是否“为词断行”的,设置或检索当前行超过指定容器的边界时是否断开转行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。

    The word-break CSS property is used to specify whether to break lines within words.

    看到这可能有的小伙伴要爆粗了,“卧槽,尼玛给我看这个是说在这两个货是双胞胎一样一样儿的吗,读少勿骗,辣鸡!”

    看到这可能有的小伙伴要爆粗了,“卧槽,尼玛给我看这个是说在这两个货是双胞胎一样一样儿的吗,读少勿骗,辣鸡!”

    4、例子

    word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时而出现溢出包含框的现象。

    这俩货自然是不同的,不然 W3C 就不会费劲儿让前者更名改姓来区分二者了。

    这俩货自然是不同的,不然 W3C 就不会费劲儿让前者更名改姓来区分二者了。

    congratulation这个单词属于长串英文,word-wrap:break-word整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断,这就是对于长串文字不起作用的解释。word-wrap:normal是默认情况,英文单词不被拆开。

    word-break表明怎样进行单词内的断句。

    下面请看图说话:

    下面请看图说话:

    5、总结

    从字面意思来看这两个都是用来对文本进行换行的,那么这两个到底有什么区别呢?我们来看一下官网上给出的例子。

    新葡亰496net 21

    新葡亰496net 22

    作用范围仅为div这类标准块级元素,th,td这类table元素虽然识别但是没有效果(如果为td,th加上宽度word-wrap在IE下是能够发挥效果的,但根据完全兼容性方便记忆角度上来说还是以前面的结论为准)。

    首先看一下word-wrap的语法:

     

     

    二、word-break

    word-wrap: normal;word-wrap: break-word;
    
    p { width: 13em; background: gold; }
    

    我们对比#test1 和 #test2 很容易发现其中不同:

    我们对比#test1 和 #test2 很容易发现其中不同:

    1、定义

    新葡亰496net 23
    当指定word-wrap:normal(默认值)时,我们看到Fernstraßenbauprivatfinanzierungsgesetzesund   这串单词很长des后面的位置显示不下,它会换一行显示,而且还从它的容器中溢出了。

    break-all 很暴力,管你什么单词,说了是 all,通通换行;

    break-all 很暴力,管你什么单词,说了是 all,通通换行;

    word-break 属性规定自动换行的处理方法。 提示:通过使用 word-break 属性,可以让浏览器实现在任意位置的换行。

     

    但是相比之下 break-word 就温柔很多了,如果放不下,先看下本行有没有可以换行的地方,比如空格或者 CJK,如果有就放过单词,在该点换行,如果没有在进行词内换行;

    但是相比之下 break-word 就温柔很多了,如果放不下,先看下本行有没有可以换行的地方,比如空格或者 CJK,如果有就放过单词,在该点换行,如果没有在进行词内换行;

    2、语法和参数

    p { width: 13em; background: gold; word-wrap: break-word; }
    


    word-break: normal(默认)|break-all|keep-all normal:依照亚洲语言和非亚洲语言的文本规则,允许在字内换行:中文则到边界处的汉字换行,英文则整个单词换行,如果出现某个单词长度过长,则会撑破容器,如果边框为固定属性,则后面部分将无法显示。 break-all:可以强行截断英文单词,强行换行。该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。 keep-all:与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。即如果是中文,将把前后标点符号内的一个汉字短语整个换行,英文单词也整个换行。 注:Firefox、Opera不能识别。

    当我们给p元素加上样式word-wrap:break-word时运行结果如下图:

    white-space:

    white-space:

    3、说明

    新葡亰496net 24
        我们看到Fernstraßenbauprivatfinanzierungsgesetzesund这么一长串仍然会换到下一行显示,当下一行的宽度仍然不够显示的时候,他就会换行显示。官网上给的break-word的解释是Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.个人的理解是,对于普通的文本,当容器剩余的空间不足以显示的时候,它可以在任意的地方被截断(换行显示).

    上文说了,word-wrap:break-word 在进行词内换行之前会确认本行是否存在换行点,其中就包括空格或者回车。

    上文说了,word-wrap:break-word 在进行词内换行之前会确认本行是否存在换行点,其中就包括空格或者回车。

    word-break:break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题(恰恰弥补了上面word-wrap:break-word对于长串文字不起作用的缺陷)。

    接下来在看看官网上给出的word-break的例子:

    所以又有一个家伙专门控制着空格和回车的宿命:

    所以又有一个家伙专门控制着空格和回车的宿命:

    4、例子

    word-break的语法:

      空格是否合并 ;

      空格是否合并 ;

    继续以上面congratulation这个单词属于长串英文,word-break:break-all它会把单词截断,该行末端就会变成类似conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。 word-break:keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)

     

      回车是否解释成折行;

      回车是否解释成折行;

    5、总结

    word-break: normal; 
    word-break: break-all; 
    word-break: keep-all;
    

      句子太长是否在空格处折行;

      句子太长是否在空格处折行;

    作用范围仅为div这类标准块级元素,th,td这类table元素虽然识别但是没有效果(经测试Chrome下word-break:break-all是有效果的,但根据完全兼容性方便记忆角度上来说还是以前面的结论为准)。Firefox,Opera是无法识别word-break的,更不用提Firefox下的th,td中使用word-break的效果了。

    再来看下面的三个实例:

    Values:

    Values:

    三、white-space

    .narrow {
        padding: 5px;
        border: 1px solid;
        width: 8em;}
    

      normal : 空白会被浏览器忽略;

      normal : 空白会被浏览器忽略;

    1、定义

     

      pre : 空白会被浏览器保留;

      pre : 空白会被浏览器保留;

    word-spacing 属性增加或减少单词间的空白(即字间隔)。 该属性定义元素中字之间插入多少空白符。针对这个属性,“字” 定义为由空白符包围的一个字符串。如果指定为长度值,会调整字之间的通常间隔;所以,normal 就等同于设置为 0。允许指定负长度值,这会让字之间挤得更紧。 注释:允许使用负值。

    <p>1. <code>word-break: normal</code></p><p class="normal narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 </p>
    
    .normal {
        word-break: normal;}
    

      nowrap : 文本不会换行,直到遇到<br>标签为止;

    新葡亰496net,  nowrap : 文本不会换行,直到遇到<br>标签为止;

    2、语法和参数

    运行结果如下图:

      pre-wrap : 保留空白序列,正常的进行换行;

      pre-wrap : 保留空白序列,正常的进行换行;

    white-space:normal | nowrap | pre-wrap | pre-line | inherit normal:默认,空白符会被浏览器忽略。 nowrap:文本不会换行,文本会在在同一行上继续,直到遇到

    新葡亰496net 25
        word-break:normal Use the default line break rule.也就是也就是单词过长时不换行,超出的部分溢出。

      pre-line : 合并空白序列,保留换行符;

      pre-line : 合并空白序列,保留换行符;

    标签为止。 pre-wrap:保留空白符,但是正常地进行换行。 pre-line:合并空白符,但是保留换行符。 inherit:继承父元素的设置 注:各个浏览器均能识别。

    再来看word-break: break-all

      inherit :继承父元素的特征。

      inherit :继承父元素的特征。

    3、说明

     

     

     

    对于pre属性,其实就是HTML中连续的多个空白符会被合并,然后为了不让他合并(最常用的场合就是表示代码文字缩进)让其中的空白符继续保留而不需要我们增加额外的样式和标签来控制它的缩进和换行。pre标签的原理也是一样的内部默认有了个white-space:pre。 对于nowrap属性,这个是强制不换行核心,一般强制不换行就是利用这个属性。Firefox的div和td中,以及IE的div中,均没有问题。唯一的瑕疵就是在IE的td中会有一个问题,如果td没有指定宽度,则nowrap仍然有效,如果td有宽度,并且文字中无标点、无空格(例如中文长串文字),nowrap则不再有效。解决方式就是可以加word-break:keep-all;可以解决此问题。

    <p>2. <code>word-break: break-all</code></p><p class="breakAll narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉 </p>
    
    .breakAll {
        word-break: break-all;}
    


    你还在找3W的资料吗,如上可以让你清晰明了掌握它。

    运行结果如下图:

     word-spacing:

     word-spacing:

    新葡亰496net 26

    新葡亰496net 27
            break-all:Word breaks may be inserted between any character for non-CJK (Chinese/Japanese/Korean) text.单词可能在任何位置被截断(中文,日文和韩文除外)

    这哥们儿跟上面几个关系不大,只是长得有点像而已,是设置单词间距的,用法也超级简单:

    这哥们儿跟上面几个关系不大,只是长得有点像而已,是设置单词间距的,用法也超级简单:

    如果想要学习更多关于前端的干货,请进我Q群详聊:142991222,我们悄悄说。大家多多支持,多多转发,多多吐糟,才让我更有动力去多多分享。

    上文中有提到word-wrap:break-word也是对文本进行截断处理。它两的区别就在于break-word对于长文本会换到下一行进行显示,如果下一行也显示不完则进行换行。而break-all对于长文本不会换到下一行,直接在当前行截断显示(如上图)

    p{
      word-spacing:30px;
    }

    新葡亰496net:换行知多少,文本换行word。p{
      word-spacing:30px;
    }

    新葡亰496net 28

    那么word-break:keep-all的作用呢?我们知道对于中文,日语,朝鲜文不会出现像英文单词那样出现一个很长很长的串。对于CJK来说默认的就是换行显示的比如:

    看到有木有这感觉 CSS 有那么一点点的小变态呢,没办法,谁叫这玩意儿就是靠积累的呢 ╮(╯_╰)╭

    看到有木有这感觉 CSS 有那么一点点的小变态呢,没办法,谁叫这玩意儿就是靠积累的呢 ╮(╯_╰)╭

     



    <p class="narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
    

     

     

    这段文字它的运行效果如下图:

    新葡亰496net 29
        但有时候我们可能会碰到这样的需求,对于中文不让它进行换行,在同一行进行显示,这时候就是keep-all出场的时候了。在上图的例子的基础上,加上word-break:keep-all之后的显示效果如下图:

    新葡亰496net 30
    新葡亰496net:换行知多少,文本换行word。    加上word-break:keep-all之后,图中的日文(没学过岛国语言,姑且这么称呼吧)就在同一行进行显示了。

    keep-all:Don't allow word breaks for CJK text.  Non-CJK text behavior is the same as for normal.这个是官网对这一条规则的解释。对于cjk文本,不允许换行显示。

    以上(word-wrap,word-break)就是css中对于文本换行相关的处理。接下来在来看一下white-space.

    官网上对于white-space的解释是white-space CSS 属性是用来描述如何处理元素中的空格。

     

    white-space: normal
    white-space: nowrap
    white-space: pre
    white-space: pre-wrap
    white-space: pre-line
    

    normal

    • 连续的空白符会被合并,换行符会被当作空白符来处理。填充line盒子时,必要的话会换行。这就是默认我们所看到的。

      nowrap

      和 normal 一样,连续的空白符会被合并。但文本内的换行无效。当我们不想让文本进行换行显示时,使用white-space:nowrap时也管用的原因就在于此。

       

    pre

    连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。

        有的时候,我们为了防止文本溢出,需要对于超出包含框的文本做隐藏或换行处理。也有的时候,我们又有这样的需求,不让文本进行换行。以上是整理了我根据平时工作中遇到的文本换行相关的一些问题及处理方式的分析。。文中所提到的官网均只mozilla官网。如果文中有不对的地方或者您还有其他的好的方法处理文本换行,欢迎一起讨论哈。

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:换行知多少,文本换行word

    关键词:

上一篇:最常用的css垂直居中方法,CSS文本方向

下一篇:没有了