當一行文字超過DIV或者Table的寬度的時候，瀏覽器中默認是讓它換行顯示的，如果我們不想讓他換行顯示那要怎么辦呢？看到這個標題很容易就會想到截斷文字加“...”的做法。

一般的文字截斷(適用于內聯與塊)：

==============CSS================

.text-overflow{

display:block;/*內聯對象需加*/

width:31em;

word-break:keep-all;/* 不換行 */

white-space:nowrap;/* 不換行 */

overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */

text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用。*/

}

=================================

對于表格的話，定義有一點不一樣：

==============CSS================

table{

width:30em;

table-layout:fixed;/* 只有定義了表格的布局算法為fixed，下面td的定義才能起作用。 */

}

td{

width:100%;

word-break:keep-all;/* 不換行 */

white-space:nowrap;/* 不換行 */

overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */

text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用。*/

}

=================================

div中文字超過自動換行的css樣式

word-break:break-all;

overflow:hidden;

---------------------------------

word-wrap:break-word;

總結

以上是生活随笔為你收集整理的div超出不换行_div+CSS设置一行内文字超过宽度不换行且不显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。