溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“css表格的單元格不換行如何實現”，內容詳細，步驟清晰，細節處理妥當，希望這篇“css表格的單元格不換行如何實現”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
css表格的單元格不換行的實現方法：1、打開相應的HTML文件；2、查看表格table與td標簽內容；3、通過為表格table與td標簽設置css屬性為“white-space:nowrap;”即可使表格內文字不換行。
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表格的單元格不換行如何實現”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
