多行文本溢出顯示省略號(…) text-overflow: ellipsis

詳解text-overflow

語法：

text-overflow：clip | ellipsis

默認值：clip

適用於：塊級容器元素

繼承性：無

動畫性：否

計算值：指定值

取值：

clip：當內聯內容移除塊容器時，將溢出部分裁切掉。

ellipsis：當內聯內容移除塊容器時，將溢出部分替換為（...）。

注意：要使得text-overflow屬性生效，塊容器必須顯式定義overflow為非visible值，同時顯式或者隱式的定義width為非auto值，white-space為nowrap值。

例如：

html代碼：

        <div class="text-overflow-ellipsis">
            今天天氣好晴朗 處處好風光 好風光 蝴蝶兒忙 蜜蜂也忙 小鳥兒忙着 白雲也忙
        </div>

css代碼：

        .text-overflow-ellipsis {
            margin-top: 20px;
            width: 300px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

     通過上面的css，常見的一行中超出文本寬度的內容用省略號表示就實現了，不知道大家發現沒，小穎在設置text-overflow:ellipsis;后還設置了 overflow:hidden;  white-space:nowrap;，當設置了text-overflow屬性后，要同時設置overflow和white屬性，text-overflow才生效。

    然而white-space:nowrap; 是指不換行，就是說只能一行顯示。

    但是有時我們想要實現多行的情況下，在最后一行的最后用“…”來表示。下面小穎就給大家分享下如何使用text-overflow: ellipsis實現多行文本溢出在最后一行顯示省略號(…)

 先來看看效果圖吧：

html代碼：

        <div class="text-overflow-ellipsis">
            今天天氣好晴朗 處處好風光 好風光 蝴蝶兒忙 蜜蜂也忙 小鳥兒忙着 白雲也忙
        </div>

css代碼：

        .text-overflow-ellipsis {
            margin-top: 20px;
            height: 55px;
            width: 100px;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

 兼容：

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden; 

如果你把-webkit-line-clamp設置成2，則

如果你需要讓文本只顯示兩行並且在第二行后面加省略號則需-webkit-line-clamp設置成2同時將height設置成35px;則

注意：這里用了一個不是很常見的屬性 -webkit-line-clamp

在WebKit瀏覽器或移動端（絕大部分是WebKit內核的瀏覽器）的頁面實現比較簡單，可以直接使用WebKit的CSS擴展屬性(WebKit是私有屬性)-webkit-line-clamp ；注意：這是一個 不規范的屬性（unsupported WebKit property），它沒有出現在 CSS 規范草案中。

-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 為了實現該效果，它需要組合其他的WebKit屬性。

常見結合屬性：

1. display: -webkit-box; 必須結合的屬性 ，將對象作為彈性伸縮盒子模型顯示 。
2. -webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。
3. text-overflow: ellipsis;，可以用來多行文本的情況下，用省略號“…”隱藏超出范圍的文本 。

具體例子可以查看http://www.css88.com/webkit/-webkit-line-clamp/

今天小穎上班因為起的晚了，不想洗頭發，出門時就套了個假發，哈哈哈哈，有沒有想看的呢？················································································

 下拉

 下拉

下拉

下拉

下拉

下拉

下拉

下拉

下拉

下拉

下拉

下拉

下拉

下拉

下拉

下拉

再下拉

沒有的啊哈哈哈

小穎就不爆圖嚇大家啦哈哈，逗逗大家，嘻嘻