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

2021-07-31 13:43:53 字數 1069 閱讀 3772

描述:利用css限制文字只顯示一行,超出部分顯示省略號

解決方案:

width: 300px;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

分析: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)。

2、white-space

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

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

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

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

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

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

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

標籤為止。

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

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

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

注意:有說的不對的地方,請多多指教!一起學習。

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

white space text overflow ellipsis 之前使用過這個例子,現在總結說明一下 先給貼 style width 300px overflow hidden white space nowrap text overflow ellipsis 省略我吧!省略我吧!省略我吧!省...

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

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

css動畫讓文字一行一行逐漸顯示

這幾天在做乙個年終總結的活動,需要將顯示的內容以動畫的形式逐漸顯示,而且還要使用輪播的效果顯示好幾頁,每頁內容都不同 其實簡單的css就可以實現,但是css 太長,就寫了個迴圈用js實現啦我是在vue的基礎上寫的,1 輪播可以使用外掛程式swiper,使用可以參考 或者我下篇文章介紹 2 每頁輪播頁...