text-overflow 文字超出

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

1. 官網(wǎng)定義

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

2. 解釋

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

3. 語(yǔ)法

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

屬性值說(shuō)明

4. 兼容

5. 實(shí)例

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. 文字超出元素后使用省略號(hào)。

<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:"!" ;
}

效果圖

說(shuō)明：只在火狐瀏覽器兼容。

6. 經(jīng)驗(yàn)分享

text-overflow這個(gè)屬性常常用來(lái)限制文字超出后我們?cè)趺慈ヌ幚沓�出的這部分文字，通常是隱藏掉，這樣才不會(huì)破壞頁(yè)面的視覺(jué)效果，不會(huì)把文字堆積重疊到一起。

7. 小結(jié)

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

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