css td文字不換行如何實現

css td文字不換行的實作方法：先開啟對應的css程式碼；然後為表格table與td標籤設定「white-space:nowrap;」樣式即可使表格內文字不換行。

本教學操作環境：Dell G3電腦、Windows7系統、HTML5&&CSS3版本。

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 中的 e03b848252eb9375d56be284e690e873 標籤。

nowrap 文字不會換行，文字會在同一行上繼續，直到遇到 0c6dc11e160d3b678d68754cc175188a 標籤為止。

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影片教學》

以上是css td文字不換行如何實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！