css實現超出div長度用省略號表示

2021-07-24 12:34:24 字數 1490 閱讀 4295

源**其實不複雜,寫法如下:

雙寬頻+無線wifi 網速公升3倍 wifi手機設定無線上網的方法

不過你不能照搬上述**到你的網頁裡,要弄清楚div樣式裡的幾個屬性。

overflow: hidden

overflow 屬性規定當內容溢位元素框時發生的事情。這個屬性定義溢位元素內容區的內容會如何處理。hidden 表示內容會被修剪,並且剪掉的內容是不可見的。

white-space: nowrap

規定文字不進行換行。white-space 屬性設定如何處理元素內的空白。nowrap 表示文字不會換行,文字會在在同一行上繼續,直到遇到

標籤為止。

text-overflow: ellipsis

text-overflow 屬性規定當文字溢位包含元素時發生的事情。ellipsis 表示顯示省略符號來代表被修剪的文字。

width:100px

width 屬性設定div的長度。

明白了以上解釋,你就可以靈活運用上述**了。

css實現超出div長度的文字自動隱藏

源**如下:

雙寬頻+無線wifi 網速公升3倍 wifi手機設定無線上網的方法

源**中,text-overflow的屬性值是clip,而不是ellipsis。clip 表示修剪文字的意思。

text-overflow屬性ellipsis和clip

overflow實現用滾動條檢視其餘文字

我們在瀏覽網頁時有時會看到這樣一種情況,就是區域長度固定而內容只用一行顯示,但不是剪掉而是可以通過滾動條滾動來檢視其餘內容。如下圖所示:

用滾動條檢視其餘文字

這是怎麼實現的呢?其實還是使用了overflow的屬性,只不過此屬性不是hidden而是scroll了。**如下:

雙寬頻+無線wifi 網速公升3倍 wifi手機設定無線上網的方法

注意,這裡**的text-overflow用clip而不是用ellipsis,否則在可見區域會顯示省略號。

white-space:normal   超出部分自動換行
white-space:nowrap超出部分不換行
text-decoration:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;text-overflow:ellipsis; -o-text-overflow:ellipsis;white-space:nowrap;

css實現超出div長度文字自動隱藏或用省略號表示

展現效果 展現效果 css實現超出div長度用省略號表示 overflow hidden overflow 屬性規定當內容溢位元素框時發生的事情。這個屬性定義溢位元素內容區的內容會如何處理。hidden 表示內容會被修剪,並且剪掉的內容是不可見的。white space nowrap 規定文字不進行...

css實現超出div長度文字自動隱藏或用省略號表示

在網頁設計中,一些區域的標題文字是不能換行的,例如首頁顯示的文章標題,因為布局是固定的,換行會打亂布局,從而使網頁產生錯位。因此,我們需要一行一段文字,超出行寬的文字用省略號表示或者直接去掉不用省略號代替。看看下圖中的例項。超出div長度用省略號表示 css實現超出div長度用省略號表示 源 其實不...

css實現超出顯示省略號

css實現 省略樣式單行 text2 瓜兮兮邀請你一起玩遊戲,請在5分鐘內確認 css部分 text2 css實現 省略樣式多行 多行超出省略 width 400rpx display webkit box overflow hidden white space normal important t...