CSS控制文字只顯示一行,超出部分顯示省略號

2021-07-05 05:18:14 字數 1637 閱讀 7005

white-space; text-overflow: ellipsis;

之前使用過這個例子,現在總結說明一下:

先給貼**:

style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">

省略我吧!

省略我吧!

省略我吧!

省略我吧!

省略我吧!

省略我吧!

省略我吧!

省略我吧!

省略我吧!

省略我吧!

省略我吧!

省略我吧!

p>

測試瀏覽器: ie6/7/8/9、opera12.02、firefox15.0.1、chrome21.0.1180.89 m

完整例子:runjs.cn

現在解釋一下為什麼要這樣做:

1、text-overflow: ellipsis;

這裡的重點樣式是 text-overflow: ellipsis;

不過話說text-ellipsis是乙個特殊的樣式,有關解釋是這樣的:text-overflow屬性僅是註解,當文字溢位時是否顯示省略標記。並不具備其它的樣式屬性定義。要實現溢位時產生省略號的效果還須定義:強制文字在一行內顯示(white-space:nowrap)及溢位內容為隱藏(overflow:hidden),只有這樣才能實現溢位文字顯示省略號的效果。

簡單理解就是我要把文字限制在一行(white-space: nowrap;),肯定這一行是有限制的(width),並且你的溢位的部分要隱藏起來(overflow: hidden;),然後出現省略號( text-overflow: ellipsis)。

我在網上看到有很多人說opera不支援text-overflow,可能因為我用的是最新版本的,已經支援這個屬性了,所以沒辦法測試,不過網上給支援低版本的opera乙個辦法,就是-o-text-overflow:ellipsis;至於火狐,也有很多人說不支援,版本問題無法考證,大家有試過的可以出來指證一下,這裡有個《在火狐裡 怎樣用css限制字數並以點的形式顯示》,可以參考一下。

順便解釋一下white-space的用法

white-space屬性宣告建立布局過程中如何處理元素中空白符。(廢話一句,這裡的空白符應該指我們用鍵盤敲入的空格或回車,因為用 或

無論white-space設定什麼都會有空格或回車。)

下面是wschool上white-space可能的值:

normal 預設。空白會被瀏覽器忽略。

pre 空白會被瀏覽器保留。其行為方式類似 html 中的

標籤。
nowrap 文字不會換行,文字會在在同一行上繼續,直到遇到

標籤為止。

pre-wrap 保留空白符序列,但是正常地進行換行。

pre-line 合併空白符序列,但是保留換行符。

inherit 規定應該從父元素繼承 white-space 屬性的值。

大部分內容來自網路,僅供自己學習理解之用,牛人笑看之。。

CSS控制文字只顯示一行,超出部分顯示省略號

pstyle width 300px overflow hidden white space nowrap text overflow ellipsis 1 text overflow ellipsis 這裡的重點樣式是 text overflow ellipsis 不過話說text ellipsi...

CSS3控制文字只顯示一行超出部分顯示省略號

在編寫網頁的時候,我們希望文字不換行,特別是在新聞列表的時候,文字多了就新增省略號,不用程式去判斷字元,英文和漢字的字元數量是不對應的,乙個漢字佔兩個英文本元的位置,如果一行出現了英文本元,裁切就不準確了,不過用css可以辦到控制文字只顯示一行,超出部分顯示省略號,如果需要強制換行,看最後 首先來看...

CSS3控制文字只顯示一行超出部分顯示省略號

在編寫網頁的時候,我們希望文字不換行,特別是在新聞列表的時候,文字多了就新增省略號,不用程式去判斷字元,英文和漢字的字元數量是不對應的,乙個漢字佔兩個英文本元的位置,如果一行出現了英文本元,裁切就不準確了,不過用css可以辦到控制文字只顯示一行,超出部分顯示省略號,如果需要強制換行,看最後 首先來看...