css表格文字不換行怎么設置？

很多時候，我們在項目開發中會出現，單元格內容由於太多導致的換行問題，讓表格顯得非常的丑陋。下面我們來看一下使用css設置表格內文字不換行的方法。

 

vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com

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>