Yijen's blog

關於部落格
繪圖 | 食記 | Web前端技術 | HTML | CSS | JavaScript 研究
  • 304151

    累積人氣

  • 128

    今日人氣

    0

    訂閱人氣

CSS3 text-overflow 屬性 (過長文字自動截斷顯示…)

筆記文

雖然是雕蟲小技,但是時常會忘記要搭配哪一個CSS屬性,還是寫一寫文章做筆記,讓自己的記憶力加深……

CSS Syntax

text-overflow: clip|ellipsis|string;
HTML
<div class="text">
這裡有一段蠻長的文字(text),被放在div(block)裡面,它很長,超過了理想的div寬度,所以我要把超過的部分用…取代
</div>

Demo

(※滑鼠滑上可以返回原形)

CSS
.text {
    width: 294px;
}

Result

這裡有一段蠻長的文字(text),被放在div(block)裡面,它很長,超過了理想的div寬度,所以我要把超過的部分用…取代

CSS
.sample1 {
    text-overflow: clip;

    /* Point */
    overflow: hidden;
    white-space: nowrap;
}

Result

這裡有一段蠻長的文字(text),被放在div(block)裡面,它很長,超過了理想的div寬度,所以我要把超過的部分立即截斷

CSS
.sample2 {    
    /* Point */
    text-overflow: ellipsis;

    overflow: hidden;
    white-space: nowrap;
}

Result

這裡有一段蠻長的文字(text),被放在div(block)裡面,它很長,超過了理想的div寬度,所以我要把超過的部分用,,,代
CSS
.sample3 {
    /* Point */
    /* 自訂 string 目前只有 firefox 支援;不支援的瀏覽器會以 clip 呈現 */
    text-overflow: ',,,';

    overflow: hidden;
    white-space: nowrap;
}
Result(only Firefox can see)
這裡有一段蠻長的文字(text),被放在div(block)裡面,它很長,超過了理想的div寬度,所以我要把超過的部分用…取代

Conclusion

CSS3 text-overflow 需要搭配的另外二個CSS屬性分別是overflow: hiddenwhite-space: nowrap,只有一個是沒效果的

這也意謂著,想用CSS對 過長文字 做處理有一點限制,它要放在 block element 裡面,而且 text-overflow 作用後,無論原本的文字有多少行,會強制變成一行,超過一行的部分就直接截斷了,並無法作到某幾行開始才顯示…這一點與一般後端程式判斷 字元數 去截斷的操作上仍有一些不同。

相簿設定
標籤設定
相簿狀態