css表格的儲存格不換行怎麼實現

css表格的儲存格不換行的實作方法：1、開啟對應的HTML檔案；2、檢視表格table與td標籤內容；3、透過為表格table與td標籤設定css屬性為「white -space:nowrap;」即可使表格內文字不換行。

本教學操作環境：Windows10系統、CSS3版、DELL G3電腦

css表格的儲存格不換行怎麼實現？

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程式碼：

此处文本超过设定的宽度

推薦學習：《css影片教學》

以上是css表格的儲存格不換行怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！