在網頁設計中，一些區域的標題文字是不能換行的，例如首頁顯示的文章標題，因為布局是固定的，換行會打亂布局，從而使網頁產生錯位。因此，我們需要一行一段文字，超出行寬的文字用省略號表示或者直接去掉不用省略號代替。看看下圖中的例項。
超出div長度用省略號表示
css實現超出div長度用省略號表示
源**其實不複雜，寫法如下：
雙寬頻+無線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，否則在可見區域會顯示省略號。
css實現超出div長度文字自動隱藏或用省略號表示
展現效果 展現效果 css實現超出div長度用省略號表示 overflow hidden overflow 屬性規定當內容溢位元素框時發生的事情。這個屬性定義溢位元素內容區的內容會如何處理。hidden 表示內容會被修剪，並且剪掉的內容是不可見的。white space nowrap 規定文字不進行...
css實現超出div長度用省略號表示
源 其實不複雜，寫法如下 雙寬頻 無線wifi 網速公升3倍 wifi手機設定無線上網的方法 不過你不能照搬上述 到你的網頁裡，要弄清楚div樣式裡的幾個屬性。overflow hidden overflow 屬性規定當內容溢位元素框時發生的事情。這個屬性定義溢位元素內容區的內容會如何處理。hidd...
css控制 div文字超出後顯示問題
如果實現單行文字的溢位顯示省略號同學們應該都知道用text overflow ellipsis屬性來，當然還需要加寬度width屬來相容部分瀏覽。實現方法 overflow hidden text overflow ellipsis white space nowrap 效果如圖 但是這個屬性只支援...