text-overflow 文字超出

該屬性主要用來定義當(dāng)文字超出元素限定范圍內(nèi)之后，為了防止頁面混亂，對超出元素范圍的文字做的一個處理。

1. 官網(wǎng)定義

text-overflow 屬性規(guī)定當(dāng)文本溢出包含元素時發(fā)生的事情。

2. 解釋

text-overflow 用于設(shè)置當(dāng)文字內(nèi)容超過所在元素設(shè)定的范圍時候的展示效果。

3. 語法

.demo{
    text-overflow: clip|ellipsis|string;
}

屬性值說明

4. 兼容

5. 實例

1. 文字超出后裁剪內(nèi)容

<div class="demo">
    網(wǎng)css3屬性教學(xué) text-overflow。
</div>

.demo{
    height: px;
    width: px;
    overflow: hidden;
    white-space: Nowrap;
    text-overflow:clip ;
}

效果圖

2. 文字超出元素后使用省略號。

<div class="demo">
    網(wǎng)css3屬性教學(xué) text-overflow。
</div>

.demo{
    height: px;
    width: px;
    overflow: hidden;
    white-space: Nowrap;
    text-overflow:ellipsis ;
}

效果圖

3. 文字超出后使用 ！。

<div class="demo">
    網(wǎng)css3屬性教學(xué) text-overflow。
</div>

.demo{
    height: px;
    width: px;
    overflow: hidden;
    white-space: Nowrap;
    text-overflow:"!" ;
}

效果圖

說明：只在火狐瀏覽器兼容。

6. 經(jīng)驗分享

text-overflow這個屬性常常用來限制文字超出后我們怎么去處理超出的這部分文字，通常是隱藏掉，這樣才不會破壞頁面的視覺效果，不會把文字堆積重疊到一起。

7. 小結(jié)

1. text-overflow一定要和overflow: hidden;、white-space: Nowrap; 一起使用，不能單獨用。

2. 這個屬性通常是在有設(shè)置寬度和高度的元素使用。