溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關div+CSS如何設置一行內文字超過寬度不換行且不顯示截斷文字...，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
當一行文字超過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;一起使用。*/
}
=================================
注：這個東東只對單行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。 這個寫法只有IE會有“...”，其它的瀏覽器文本超出指定寬度時會隱藏。
看完上述內容，你們對div+CSS如何設置一行內文字超過寬度不換行且不顯示截斷文字...有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
