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

在網(wǎng)頁設計中，一些區(qū)域的標題文字是不能換行的，例如首頁顯示的文章標題，因為布局是固定的，換行會打亂布局，從而使網(wǎng)頁產(chǎn)生錯位。因此，我們需要一行一段文字，超出行寬的文字用省略號表示或者直接去掉不用省略號代替。看看下圖中的實例。

超出div長度用省略號表示

上圖顯示，擴展閱讀的文章標題，超出行寬用省略號表示。本文我們就來看看如何用css來實現(xiàn)的。

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

源代碼其實不復雜，寫法如下：

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

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

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

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

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

width:100px
width 屬性設置div的長度。

明白了以上解釋，你就可以靈活運用上述代碼了。

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

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

源代碼如下：

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

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

text-overflow屬性ellipsis和clip

overflow實現(xiàn)用滾動條查看其余文字

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

用滾動條查看其余文字

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

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

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