技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營

贊助商

分類目錄

贊助商

最新文章

搜索

css實(shí)現(xiàn)超出div長度文字自動(dòng)隱藏或用省略號(hào)表示

作者:admin    時(shí)間:2015-11-16 13:16:42    瀏覽:

在網(wǎng)頁設(shè)計(jì)中,一些區(qū)域的標(biāo)題文字是不能換行的,例如首頁顯示的文章標(biāo)題,因?yàn)椴季质枪潭ǖ?,換行會(huì)打亂布局,從而使網(wǎng)頁產(chǎn)生錯(cuò)位。因此,我們需要一行一段文字,超出行寬的文字用省略號(hào)表示或者直接去掉不用省略號(hào)代替??纯聪聢D中的實(shí)例。

超出div長度用省略號(hào)表示

超出div長度用省略號(hào)表示

上圖顯示,擴(kuò)展閱讀的文章標(biāo)題,超出行寬用省略號(hào)表示。本文我們就來看看如何用css來實(shí)現(xiàn)的。

css實(shí)現(xiàn)超出div長度用省略號(hào)表示

源代碼其實(shí)不復(fù)雜,寫法如下:

<div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;width:100px;" title="雙寬帶+無線WiFi 網(wǎng)速升3倍 WiFi手機(jī)設(shè)置無線上網(wǎng)的方法">雙寬帶+無線WiFi 網(wǎng)速升3倍 WiFi手機(jī)設(shè)置無線上網(wǎng)的方法</div>

不過你不能照搬上述代碼到你的網(wǎng)頁里,要弄清楚div樣式里的幾個(gè)屬性。

overflow: hidden
overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。hidden 表示內(nèi)容會(huì)被修剪,并且剪掉的內(nèi)容是不可見的。

white-space: nowrap
規(guī)定文本不進(jìn)行換行。white-space 屬性設(shè)置如何處理元素內(nèi)的空白。nowrap 表示文本不會(huì)換行,文本會(huì)在在同一行上繼續(xù),直到遇到 <br> 標(biāo)簽為止。

text-overflow: ellipsis
text-overflow 屬性規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情。ellipsis 表示顯示省略符號(hào)來代表被修剪的文本。

width:100px
width 屬性設(shè)置div的長度。

明白了以上解釋,你就可以靈活運(yùn)用上述代碼了。

css實(shí)現(xiàn)超出div長度的文字自動(dòng)隱藏

其實(shí)有很多人是不喜歡用省略號(hào)表示超過div長度的內(nèi)容的,而是直接不顯示就行了。這個(gè)同樣可以用css來實(shí)現(xiàn),而源代碼還是跟上述源代碼類似,只是要更改一下text-overflow的屬性值。

源代碼如下:

<div style="overflow: hidden; white-space: nowrap; text-overflow: clip;width:100px;" title="雙寬帶+無線WiFi 網(wǎng)速升3倍 WiFi手機(jī)設(shè)置無線上網(wǎng)的方法">雙寬帶+無線WiFi 網(wǎng)速升3倍 WiFi手機(jī)設(shè)置無線上網(wǎng)的方法</div>

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

text-overflow屬性ellipsis和clip

text-overflow屬性ellipsis和clip

overflow實(shí)現(xiàn)用滾動(dòng)條查看其余文字

我們在瀏覽網(wǎng)頁時(shí)有時(shí)會(huì)看到這樣一種情況,就是區(qū)域長度固定而內(nèi)容只用一行顯示,但不是剪掉而是可以通過滾動(dòng)條滾動(dòng)來查看其余內(nèi)容。如下圖所示:

用滾動(dòng)條查看其余文字

用滾動(dòng)條查看其余文字

這是怎么實(shí)現(xiàn)的呢?其實(shí)還是使用了overflow的屬性,只不過此屬性不是hidden而是scroll了。代碼如下:

<div style="overflow: scroll; white-space: nowrap; text-overflow: clip;width:100px;" title="雙寬帶+無線WiFi 網(wǎng)速升3倍 WiFi手機(jī)設(shè)置無線上網(wǎng)的方法">雙寬帶+無線WiFi 網(wǎng)速升3倍 WiFi手機(jī)設(shè)置無線上網(wǎng)的方法</div>

注意,這里代碼的text-overflow用clip而不是用ellipsis,否則在可見區(qū)域會(huì)顯示省略號(hào)。

標(biāo)簽: css  
x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */