css3 text-overflow和white-space，word-wrap，word-break進階

時間 2019-11-05

標籤 css3 css text overflow white space word wrap break 進階欄目 CSS 简体版

原文原文鏈接

1、text-overflow

一、text-overflow做用

簡單來講，text-overflow用來設置文本溢出時是否用省略標記（...）css

準確的說是設置溢出的文本在不顯示的狀況下怎樣展現給用戶，直接裁剪掉？用省略（...）標記？或者顯示自定義的string。html

二、text-overflow生效的條件

text-overflow只是說明文本溢出用什麼方式顯示，那什麼狀況會發生文本溢出現象？瀏覽器

white-space:nowrap的狀況下
單個超長字符串

以上2種狀況文本會溢出，可是text-overflow的效果不會主動產生，要生效必須手動設置元素overflow:hidden來觸發。ide

<style type="text/css">
p{
    width: 100px;
    background-color: #ccc;
}
.ellipsis{
    text-overflow:ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.strellipsis{
    text-overflow:ellipsis;
    overflow: hidden;
}
</style>
<body>
    <h3>一、普通文本溢出</h3>
    <p class="ellipsis">文本內容文本內容文本內容文本內容</p>
    <h3>二、超長字符串溢出</h3>
    <p class="strellipsis">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</body>

總結:text-overflow只是說明文本溢出用什麼方式顯示，真正要達到溢出產生省略號的效果，普通文本須要定義強制文本在一行內顯示（white-space:nowrap）及溢出內容爲隱藏（overflow:hidden）；超長字符串須要設置溢出內容爲隱藏（overflow:hidden）。學習

三、text-overflow取值

text-overflow:[ clip | ellipsis |<string>]{1,2}spa

默認值爲clip翻譯

3.1clip

clip表明溢出內容被裁剪掉了3d

Note:clip可能把一個字符截斷，若是要在2個字符之間裁剪必須用空字符串('')。code

<style type="text/css">
    p {
        width: 100px;
        background-color: #ccc;
        /* 下面2個屬性必須設置 */
        white-space: nowrap;
        overflow: hidden;
    }
    .overflow-clip {
        text-overflow: clip;
    }
    .overflow-clip2 {
        text-overflow: "";
    }
    
    </style>

    <body>
        <p class="overflow-clip">abcd abcd abcd abcd abcd abcd abcd</p>
        <p class="overflow-clip2">abcd abcd abcd abcd abcd abcd abcd</p>
    </body>

View Code

3.2ellipsis

ellipsis:溢出內容用省略號表示。orm

3.3<string>

ellipsis：<string>還在試驗階段，存在兼容性問題，生成環境還不能用。

<style type="text/css">
    p {
        width: 100px;
        background-color: #ccc;
        /* 下面2個屬性必須設置 */
        white-space: nowrap;
        overflow: hidden;
    }
    .overflow-visible {
        /*重置white-space值*/
        white-space: initial;
    }
    .overflow-clip {
        text-overflow: clip;
    }
    .overflow-ellipsis {
        text-overflow: ellipsis;
    }
    .overflow-string {
        /*存在兼容性問題 */
        text-overflow: " [..]";
    }
    </style>

    <body>
        <p class="overflow-visible">文本內容文本內容文本內容文本內容</p>
        <p class="overflow-clip">文本內容文本內容文本內容文本內容</p>
        <p class="overflow-ellipsis">文本內容文本內容文本內容文本內容</p>
        <p class="overflow-string">文本內容文本內容文本內容文本內容</p>
    </body>

Note:上面例子中只設置了p元素的寬度值，高度不是必須的。

3.4text-overflow取值爲2個值的狀況

text-overflow:[ clip | ellipsis |<string>]{1,2}說了text-overflow的值最少1個最多2個，下面說明2個值的含義。

text-overflow: ',' '.';表明direction:ltr時，文本溢出部分用[.];direction:rtl時，文本溢出部分用[,]。

    <style type="text/css">
    p {
        text-overflow: ',' '.';
        width: 100px;
        background-color: #ccc;
        /* 下面2個屬性必須設置 */
        white-space: nowrap;
        overflow: hidden;
    }
    </style>

    <body>
        <p style="direction:ltr">12345678abcdefg</p>
        <p style="direction:rtl">12345678abcdefg</p>
    </body>

2、white-space

一、white-space做用及取值

white-space設置如何處理元素內的空白。

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

normal:默認值，空白會被瀏覽器忽略。

也就是說連續的空白符會被合併，換行符會被看成空白符來處理。填充line盒子時，必要的話會換行。

pre:連續的空白符會被保留。在遇到換行符或者 元素時纔會換行。行爲相似html標籤<pre>。

nowrap:文本不會換行，文本會在在同一行上繼續，直到遇到 標籤爲止。

和 normal 同樣，連續的空白符會被合併。但文本內的換行無效，文本會在同一行上繼續，直到遇到 標籤爲止。

pre-wrap：保留空白符序列，可是正常地進行換行。也就是說連續的空白符會被保留。在遇到換行符或者 元素，或者須要爲了填充line盒子時纔會換行。

pre-line：合併空白符序列，可是保留換行符。也就是說連續的空白符會被合併。在遇到換行符或者 元素，或者須要爲了填充line盒子時會換行。

inherit:從父元素繼承white-space屬性的值。

二、white-space的一個有意思的應用場景

行級元素內不會自動換行，有需求須要讓行級元素換行，咱們都直接用 這個換行標籤解決。

據《CSS SECRET》說 換行不只在可維護性方面是一種糟糕的實踐，並且污染告終構層的代碼 。這句話先保留意見，那麼有什麼其餘的解決方案？

我好像沒有這樣思考過？！今天看到一個有意思的解決方案。

原理也很簡單，用的都是咱們熟知的::after和white-space，以下。

    <style>
    .inline-element::after {
        content: "\A";
        white-space: pre;
    }
    </style>
    <span>文字換行<span class="inline-element">文字</span>換行文字換行文字換行</span>

::after僞元素的content設置爲「\A」。換行符的Unicode 字符是：0x000A 。在 CSS 中，這個字符能夠寫做 "\000A"，或簡化爲 "\A"。因此意思是在元素末尾添加了一個換行符的。
white-space設置爲pre，white-space默認值是normal，換行符會被看成空白符來處理，因此須要設置爲pre，達到換行的效果。

看完後是否是以爲頗有意思？雖然都是些耳熟能詳的小知識，可是隻要善於思考應用就會有奇用！

3、word-wrap

word-wrap也能夠用來設置文本行爲，當前行發生溢出時是否斷開轉行。

word-wrap:normal|break-word

normal:瀏覽器默認值
break-word設置長單詞或者URL地址內部進行換行，爲了防止當一個字符串太長而找不到它的天然斷句點時而出現溢出包含框的現象。

一、word-wrap和word-break對比

這兩個都是用做單詞內斷句。

word-wrap:控制換行，而且溢出時表示是否容許瀏覽器在單詞內斷句，這是爲了防止當一個字符串太長而找不到它的天然斷句點時產生溢出現象。

word-break:代表怎樣進行單詞內的斷句。

舉例：word-wrap:

<style type="text/css">
div{
    width: 200px;
    height: 100px;
    background-color: #ccc;
}
.bw{
    word-wrap:break-word;
}
.normal{
    /*word-wrap:normal;*/
}
.wb{
    word-break:break-all;
}
</style>
<body>
<h2>word-wrap:normal</h2>
<br/><div class="normal">a long word ddddddddddddddddddddddddddddddddd  a long word</div>
<h2>word-wrap:break-word</h2>
<br/><div class="bw">a long word ddddddddddddddddddddddddddddddddd  a long word</div>
<h2>word-break:break-all</h2>
<br/><div class="wb">a long word ddddddddddddddddddddddddddddddddd  a long word</div>
</body>

可見word-wrap的表現行爲是：

遇到一個長單詞，在一行中放不下時，首先換一行放到下一行，若是word-wrap的值是默認的normal，則這個字符串太長找不到天然斷句點時就發生溢出。可用word-wrap:break-word強制斷句。

而break-word的表現行爲是：簡單粗暴，直接在單詞內斷句，省空間，並不會嘗試把一個長字符串放到下一行。

有word-break時word-wrap不起做用。因此不少人在斷句時會寫word-wrap:break-word;word-break:break-all;實際上是不必的，只要一個word-break:break-all足以。

4、word-break

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

normal:使用瀏覽器默認的斷字規則。

break-all: non-CJK(中文，韓文，日文)語言的文本容許在單詞內任意字符斷開。適用於包含一些非亞洲文本的亞洲文本。

keep-all:非CJK同normal，CJK不容許字斷開。適用於包含少許亞洲文本非亞洲文本。

<style>
    .narrow {
        padding: 5px;
        border: 1px solid;
        width: 8em;
    }
    .normal {
        word-break: normal;
    }
    .breakAll {
        word-break: break-all;
    }
    .keep {
        word-break: keep-all;
    }
    </style>

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

View Code

5、應用

一、新浪微博

二、暱稱超出顯示省略號

.vg_headinfo_nickname{
    display: inline-block;
    font-size:1rem;
    max-width:85%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color:#fff;
    height: 1.4rem;
    position: relative;
    padding-right: 1.125rem;
}