text-overflow 文字超出

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

1. 官網(wǎng)定義

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

2. 慕課解釋

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

3. 語法

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

屬性值說明

4. 兼容

5. 實例

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

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

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

效果圖

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

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

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

效果圖

3. 文字超出后使用 ！。

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

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

效果圖

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

6. 經(jīng)驗分享

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

7. 小結(jié)

1. text-overflow一定要和overflow: hidden;、white-space: nowrap; 一起使用，不能單獨用。
2. 這個屬性通常是在有設(shè)置寬度和高度的元素使用。