溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關css td文字不換行的實現方法的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
css td文字不換行的實現方法：首先打開相應的css代碼；然后為表格table與td標簽設置“white-space:nowrap;”樣式即可使表格內文字不換行。
css表格文字不換行的設置
很多時候，我們在項目開發中會出現，單元格內容由于太多導致的換行問題，讓表格顯得非常的丑陋。下面我們來看一下使用css設置表格內文字不換行的方法。
css可以通過為表格table與td標簽設置white-space:nowrap;樣式使表格內文字不換行。
代碼如下：
/*讓單元格內容過多時也不換行*/
#datasTablediv table td{
white-space: nowrap;
}white-space 屬性設置如何處理元素內的空白。
這個屬性聲明建立布局過程中如何處理元素中的空白符。值 pre-wrap 和 pre-line 是 css 2.1 中新增的。
屬性值：
normal 默認。空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似 html 中的 <pre> 標簽。
nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。
pre-wrap 保留空白符序列，但是正常地進行換行。
pre-line 合并空白符序列，但是保留換行符。
inherit 規定應該從父元素繼承 white-space 屬性的值。
示例：
css代碼：
table {
border : 1px solid red;
}
td {
white-space:nowrap;
text-overflow:ellipsis;
width:50px;
overflow:hidden;
display: block;
}html代碼：
<table> <tr><td>此處文本超過設定的寬度</td></tr> </table>
感謝各位的閱讀！關于“css td文字不換行的實現方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
