css超出div長(zhǎng)度文字自動(dòng)隱藏或用省略號(hào)表示

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

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

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

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

源代碼其實(shí)不復(fù)雜，寫(xiě)法如下：

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

不過(guò)你不能照搬上述代碼到你的網(wǎng)頁(yè)里，要弄清楚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)容是不可見(jiàn)的。

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)來(lái)代表被修剪的文本。

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

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

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

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

源代碼如下：

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

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

text-overflow屬性ellipsis和clip

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

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

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

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

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

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