css3 text-overflow和white-space，word-wrap，word-break進(jìn)階

一、text-overflow

1、text-overflow作用

簡(jiǎn)單來(lái)說(shuō)，text-overflow用來(lái)設(shè)置文本溢出時(shí)是否用省略標(biāo)記（...）

準(zhǔn)確的說(shuō)是設(shè)置溢出的文本在不顯示的情況下怎樣展示給用戶，直接裁剪掉？用省略（...）標(biāo)記？或者顯示自定義的string。

2、text-overflow生效的條件

text-overflow只是說(shuō)明文本溢出用什么方式顯示，那什么情況會(huì)發(fā)生文本溢出現(xiàn)象？

white-space:nowrap的情況下
單個(gè)超長(zhǎng)字符串

以上2種情況文本會(huì)溢出，但是text-overflow的效果不會(huì)主動(dòng)產(chǎn)生，要生效必須手動(dòng)設(shè)置元素overflow:hidden來(lái)觸發(fā)。

<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>1、普通文本溢出</h3>
    <p class="ellipsis">文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容</p>
    <h3>2、超長(zhǎng)字符串溢出</h3>
    <p class="strellipsis">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</body>

總結(jié):text-overflow只是說(shuō)明文本溢出用什么方式顯示，真正要達(dá)到溢出產(chǎn)生省略號(hào)的效果，普通文本需要定義強(qiáng)制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden）；超長(zhǎng)字符串需要設(shè)置溢出內(nèi)容為隱藏（overflow:hidden）。

3、text-overflow取值

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

默認(rèn)值為clip

3.1clip

clip代表溢出內(nèi)容被裁剪掉了

Note:clip可能把一個(gè)字符截?cái)啵绻?個(gè)字符之間裁剪必須用空字符串('')。

<style type="text/css">
    p {
        width: 100px;
        background-color: #ccc;
        /* 下面2個(gè)屬性必須設(shè)置 */
        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:溢出內(nèi)容用省略號(hào)表示。

3.3<string>

ellipsis：<string>還在試驗(yàn)階段，存在兼容性問(wèn)題，生成環(huán)境還不能用。

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

    <body>
        <p class="overflow-visible">文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容</p>
        <p class="overflow-clip">文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容</p>
        <p class="overflow-ellipsis">文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容</p>
        <p class="overflow-string">文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容</p>
    </body>

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

3.4text-overflow取值為2個(gè)值的情況

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

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

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

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

二、white-space

1、white-space作用及取值

white-space設(shè)置如何處理元素內(nèi)的空白。

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

normal:默認(rèn)值，空白會(huì)被瀏覽器忽略。

也就是說(shuō)連續(xù)的空白符會(huì)被合并，換行符會(huì)被當(dāng)作空白符來(lái)處理。填充line盒子時(shí)，必要的話會(huì)換行。

pre:連續(xù)的空白符會(huì)被保留。在遇到換行符或者 元素時(shí)才會(huì)換行。行為類似html標(biāo)簽<pre>。

nowrap:文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 標(biāo)簽為止。

和 normal 一樣，連續(xù)的空白符會(huì)被合并。但文本內(nèi)的換行無(wú)效，文本會(huì)在同一行上繼續(xù)，直到遇到 標(biāo)簽為止。

pre-wrap：保留空白符序列，但是正常地進(jìn)行換行。也就是說(shuō)連續(xù)的空白符會(huì)被保留。在遇到換行符或者 元素，或者需要為了填充line盒子時(shí)才會(huì)換行。

pre-line：合并空白符序列，但是保留換行符。也就是說(shuō)連續(xù)的空白符會(huì)被合并。在遇到換行符或者 元素，或者需要為了填充line盒子時(shí)會(huì)換行。

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

2、white-space的一個(gè)有意思的應(yīng)用場(chǎng)景

行級(jí)元素內(nèi)不會(huì)自動(dòng)換行，有需求需要讓行級(jí)元素?fù)Q行，我們都直接用 這個(gè)換行標(biāo)簽解決。

據(jù)《CSS SECRET》說(shuō) 換行不僅在可維護(hù)性方面是一種糟糕的實(shí)踐，而且污染了結(jié)構(gòu)層的代碼 。這句話先保留意見(jiàn)，那么有什么其他的解決方案？

我好像沒(méi)有這樣思考過(guò)？！今天看到一個(gè)有意思的解決方案。

原理也很簡(jiǎn)單，用的都是我們熟知的::after和white-space，如下。

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

::after偽元素的content設(shè)置為“\A”。換行符的Unicode 字符是：0x000A 。在 CSS 中，這個(gè)字符可以寫作 "\000A"，或簡(jiǎn)化為 "\A"。所以意思是在元素末尾添加了一個(gè)換行符的。
white-space設(shè)置為pre，white-space默認(rèn)值是normal，換行符會(huì)被當(dāng)作空白符來(lái)處理，所以需要設(shè)置為pre，達(dá)到換行的效果。

看完后是不是覺(jué)得很有意思？雖然都是些耳熟能詳?shù)男≈R(shí)，但是只要善于思考應(yīng)用就會(huì)有奇用！

三、word-wrap

word-wrap也可以用來(lái)設(shè)置文本行為，當(dāng)前行發(fā)生溢出時(shí)是否斷開(kāi)轉(zhuǎn)行。

word-wrap:normal|break-word

normal:瀏覽器默認(rèn)值
break-word設(shè)置長(zhǎng)單詞或者URL地址內(nèi)部進(jìn)行換行，為了防止當(dāng)一個(gè)字符串太長(zhǎng)而找不到它的自然斷句點(diǎn)時(shí)而出現(xiàn)溢出包含框的現(xiàn)象。

1、word-wrap和word-break對(duì)比

這兩個(gè)都是用作單詞內(nèi)斷句。

word-wrap:控制換行，并且溢出時(shí)表示是否允許瀏覽器在單詞內(nèi)斷句，這是為了防止當(dāng)一個(gè)字符串太長(zhǎng)而找不到它的自然斷句點(diǎn)時(shí)產(chǎn)生溢出現(xiàn)象。

word-break:表明怎樣進(jìn)行單詞內(nèi)的斷句。

舉例：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>

可見(jiàn)word-wrap的表現(xiàn)行為是：

遇到一個(gè)長(zhǎng)單詞，在一行中放不下時(shí)，首先換一行放到下一行，如果word-wrap的值是默認(rèn)的normal，則這個(gè)字符串太長(zhǎng)找不到自然斷句點(diǎn)時(shí)就發(fā)生溢出。可用word-wrap:break-word強(qiáng)制斷句。

而break-word的表現(xiàn)行為是：簡(jiǎn)單粗暴，直接在單詞內(nèi)斷句，省空間，并不會(huì)嘗試把一個(gè)長(zhǎng)字符串放到下一行。

有word-break時(shí)word-wrap不起作用。所以很多人在斷句時(shí)會(huì)寫word-wrap:break-word;word-break:break-all;其實(shí)是沒(méi)必要的，只要一個(gè)word-break:break-all足以。

四、word-break

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

normal:使用瀏覽器默認(rèn)的斷字規(guī)則。

break-all: non-CJK(中文，韓文，日文)語(yǔ)言的文本允許在單詞內(nèi)任意字符斷開(kāi)。適用于包含一些非亞洲文本的亞洲文本。

keep-all:非CJK同normal，CJK不允許字?jǐn)嚅_(kāi)。適用于包含少量亞洲文本非亞洲文本。

<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. 次の単語(yǔ)グレートブリテンおよび北アイルランド連合王國(guó)で本當(dāng)に大きな言葉 </p>
        <p>2. <code>word-break: break-all</code></p>
        <p class="breakAll narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語(yǔ)グレートブリテンおよび北アイルランド連合王國(guó)で本當(dāng)に大きな言葉 </p>
        <p>3. <code>word-break: keep-all</code></p>
        <p class="keep narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語(yǔ)グレートブリテンおよび北アイルランド連合王國(guó)で本當(dāng)に大きな言葉</p>
    </body>

View Code

五、應(yīng)用

1、新浪微博

2、昵稱超出顯示省略號(hào)

.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;
}

參考文檔：

text-overflow - MDN Docs

最后更新：【update20161115】

本文作者starof,因知識(shí)本身在變化，作者也在不斷學(xué)習(xí)成長(zhǎng)，文章內(nèi)容也不定時(shí)更新，為避免誤導(dǎo)讀者，方便追根溯源，請(qǐng)諸位轉(zhuǎn)載注明出處：http://www.rzrgm.cn/starof/p/5443445.html有問(wèn)題歡迎與我討論，共同進(jìn)步。

posted @ 2015-05-30 23:21 starof 閱讀(2578) 評(píng)論(0) 收藏舉報(bào)

刷新頁(yè)面返回頂部

starof

我是你的驕傲嗎？