text-overflow 文字超出

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

1. 官網定義

text-overflow 屬性規定當文本溢出包含元素時發生的事情。

2. 解釋

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

3. 語法

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

屬性值說明

4. 兼容

5. 實例

1. 文字超出后裁剪內容

<div class="demo">
    網css3屬性教學 text-overflow。
</div>

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

效果圖

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

<div class="demo">
    網css3屬性教學 text-overflow。
</div>

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

效果圖

3. 文字超出后使用 ！。

<div class="demo">
    網css3屬性教學 text-overflow。
</div>

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

效果圖

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

6. 經驗分享

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

7. 小結

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

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