上圖顯示，站長(zhǎng)熱評(píng)列表里面的文章標(biāo)題，超出行寬用省略號(hào)表示。本文我們就來(lái)看看如何用css來(lái)實(shí)現(xiàn)的。

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

<div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;width:150px;" title="divcss超出長(zhǎng)度文字自動(dòng)隱藏或用省略號(hào)表示">divcss超出長(zhǎng)度文字自動(dòng)隱藏或用省略號(hào)表示</div>

上列代碼各標(biāo)簽解釋：

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)度。

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

<div style="overflow: hidden; white-space: nowrap; text-overflow: clip;width:100px;" title="divcss超出長(zhǎng)度文字自動(dòng)隱藏或用省略號(hào)表示">divcss超出長(zhǎng)度文字自動(dòng)隱藏或用省略號(hào)表示</div>

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

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

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

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

<div style="overflow: scroll; white-space: nowrap; text-overflow: clip;width:200px;" title="divcss超出長(zhǎng)度文字自動(dòng)隱藏或用省略號(hào)表示">divcss超出長(zhǎng)度文字自動(dòng)隱藏或用省略號(hào)表示</div>

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