时间戳

首页 > 技术文章 > white-space、word-break、word-wrap傻傻分不清楚

white-space、word-break、word-wrap傻傻分不清楚

antao 2020-05-13 11:09 原文

1.white-space 属性设置如何处理元素内的空白。

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

 

 

 

 

 

 

 

 

&#13;表示回车　　&#10;表示换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>white-space</title>
        <style type="text/css">
            .p1 {
                white-space: normal
                /* 1.空白合并为一个 2.<br/>换行保留 3.&nbsp;空格保留 4.&#10;没换行，合并为空格 5.&#13;空格保留*/
            }

            .p2 {
                white-space: nowrap
                /* 1.空白合并为一个 2.<br/>换行保留 3.&nbsp;空格保留 4.&#10;没换行，合并为空格 5.&#13;空格保留*/
            }

            .p3 {
                white-space: pre
                /* 1.空白保留 2.<br/>换行保留 3.&nbsp;空格保留 4.&#10;换行保留 5.&#13;空格不显示*/
            }

            .p4 {
                white-space: pre-wrap
                /* 1.空白保留 2.<br/>换行保留 3.&nbsp;空格保留 4.&#10;换行保留 5.&#13;空格不显示*/
            }

            .p5 {
                white-space: pre-line
                /* 1.空白合并为一个 2.<br/>换行保留 3.&nbsp;空格保留 4.&#10;换行保留 5.&#13;空格保留*/
            }
        </style>
    </head>
    <body>
        <p class="p1">
            这是            一些文本p1。
            这是<br />一些文本p1。
            这是&nbsp;&nbsp;&nbsp;&nbsp;一些文本p1。
            这是&#10;一些文本p1。
            这是&#13;一些文本p1。
        </p>
        <p class="p2">
            这是            一些文本p2。
            这是<br />一些文本p2。
            这是&nbsp;&nbsp;&nbsp;&nbsp;一些文本p2。
            这是&#10;一些文本p2。
            这是&#13;一些文本p2。
        </p>
        <p class="p3">
            这是            一些文本p3。
            这是<br />一些文本p3。
            这是&nbsp;&nbsp;&nbsp;&nbsp;一些文本p3。
            这是&#10;一些文本p3。
            这是&#13;一些文本p3。
        </p>
        <p class="p4">
            这是            一些文本p4。
            这是<br />一些文本p4。
            这是&nbsp;&nbsp;&nbsp;&nbsp;一些文本p4。
            这是&#10;一些文本p4。
            这是&#13;一些文本p4。
        </p>
        <p class="p5">
            这是            一些文本p5。
            这是<br />一些文本p5。
            这是&nbsp;&nbsp;&nbsp;&nbsp;一些文本p5。
            这是&#10;一些文本p5。
            这是&#13;一些文本p5。
        </p>        
    </body>
</html>

总结white-space 

是否能发挥作用换行符空格自动换行</br>、nbsp;
normal × ×（合并） √ √
nowrap × ×（合并） × √
pre √ √ × √
pre-wrap √ √ √ √
pre-line √ ×（合并） √ √

 

2.word-break

css的 word-break 属性用来标明怎么样进行单词内的断句。

normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

 

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>word-break</title>
        <style type="text/css">
            p{
                width: 300px;
                border:1px solid #000000;
            }
            .p1 {
                word-break: normal
                /*  最后面的宽度不够显示最后一个单词
                    整个单词换行到第二行
                 */
            }

            .p2 {
                word-break: break-all
                /*  最后面的宽度不够显示最后一个单词
                    超过部分换行到第二行
                 */
            }

            .p3 {
                word-break: keep-all
                /*  最后面的宽度不够显示最后一个单词
                    强制显示第一行
                 */
            }
        </style>
    </head>
    <body>
        <p class="p1">
            世界上最长的英文单词是pneumonoultramicroscopicsilicovolcanoconiosis吗？
        <!--
            世界上最长的英文单词是
            pneumonoultramicroscopicsilicovolcanoconiosis
            吗？ 
            -->
        </p>
        <p class="p2">
            世界上最长的英文单词是pneumonoultramicroscopicsilicovolcanoconiosis吗？
        <!--
            世界上最长的英文单词是pneumonoultra
            microscopicsilicovolcanoconiosis吗？ 
            -->
        </p>
        <p class="p3">
            世界上最长的英文单词是pneumonoultramicroscopicsilicovolcanoconiosis吗？
        <!--
            世界上最长的英文单词是 pneumonoultramicroscopicsilicovolcanoconiosis吗？ 
            -->
        </p>
    </body>
</html>

 

3.word-wrap又叫做overflow-wrap

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

CSS3中将 word-wrap 改名为 overflow-wrap；

由于历史原因，当你使用 overflow-wrap 时，最好同时使用 word-wrap 作为备选，作向前兼容。

normal 允许内容顶开或溢出指定的容器边界。
break-word 内容将在边界内换行。如果需要，单词内部允许断行。

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>overflow-wrap</title>
        <style type="text/css">
            p{
                width: 300px;
                border:1px solid #000000;
            }
            .p1 {
                overflow-wrap: normal
                /*  最后面的宽度不够显示最后一个单词
                    整个单词换行到第二行，第二不够显示，不再换行
                    直到下个单词，数字或中文段落又换行
                 */
            }

            .p2 {
                overflow-wrap: break-word
                /*  最后面的宽度不够显示最后一个单词
                    整个单词换行到第二行，第二不够显示，折行显示行
                    超过部分换行到再起一行
                    直到下个单词，数字又换行
                 */
            }
        </style>
    </head>
    <body>
        <p class="p1">
            世界上最长的英文单词是pneumonoultramicroscopicsilicovolcanoconiosis吗？
        <!--
            世界上最长的英文单词是
            pneumonoultramicroscopicsilicovolcanoconiosis
            吗？ 
            -->
        </p>
        <p class="p2">
            世界上最长的英文单词是pneumonoultramicroscopicsilicovolcanoconiosis吗？
        <!--
            世界上最长的英文单词是
            pneumonoultramicroscopicsilicovolcan
            oconiosis吗？ 
            -->
        </p>
    </body>
</html>

 

推荐阅读