文字溢位時，實現在末尾顯示三個點省略效果

有時我們會有這樣的需求：當文字內容較多，寬度超出父容器時，就在最後顯示三個點，代表還有東西被摺疊起來了。如下圖

具體實現

html 如下

1

<
div>
2<
p>我是文字我是文字我是文字我是文字
p>
3div
>

1

div 

p 的樣式如下

1

p 

第 3 行表示在溢位時顯示省略標記，也就是圖中紅線圈出來的三個點，這個就沒啥好說的了；

第 4 行表示溢位部分內容隱藏，不溢位隱藏的話.... 第 3 行的溢位設定還有啥用，我都直接顯示到父容器外面了啊喂！

但有時我們需要實現多行文字末尾摺疊，可以使用如下方法，但相容性較差，可以用於移動端

@左耳_fly 提出了火狐不支援的問題，對的，在這裡宣告下，火狐和 ie 不支援的哈，截圖是 chrome 裡的 

1

p 

如何讓文字溢位時顯示省略標記「 」

語法 text overflow clip ellipsis 取值 clip 預設值 不顯示省略標記 而是簡單的裁切。ellipsis 當物件內文字溢位時顯示省略標記 可惜text overflow 還只是ie的私有屬性而已，也沒被收錄到w3c標準裡 如果想讓某個容器 div或者li 等塊級元素 顯...

文字溢位顯示省略

在做靜態頁面的有時候，有些文字內容我們考慮不多，就簡單的寫幾個文字放在那裡顯示，瀏覽靜態檔案的時候沒什麼問題，當後台開發講頁面套好資料後，可能有些文字比較長，這樣我們以前定義單行的內容就會出現換行，頁面的改區域就不能正常顯示了，出現錯位。這個問題我需要提前想到，解決辦法有很多種，前端和後台都有處理的...

當文字溢位時顯示為省略號

當元素設定固定寬度之後，如果元素內的文字超出寬度之後將其設定為省略號效果的方法 text overflow 屬性規定當文字溢位包含元素時發生的事情。text overflow clip ellipsis string 值 描述clip 修剪文字。ellipsis 顯示省略符號來代表被修剪的文字。st...