css表格的單元格不換行如何實現(xiàn)

本文小編為大家詳細(xì)介紹“css表格的單元格不換行如何實現(xiàn)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“css表格的單元格不換行如何實現(xiàn)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

css表格的單元格不換行的實現(xiàn)方法：1、打開相應(yīng)的HTML文件；2、查看表格table與td標(biāo)簽內(nèi)容；3、通過為表格table與td標(biāo)簽設(shè)置css屬性為“white-space:nowrap;”即可使表格內(nèi)文字不換行。

css表格文字不換行設(shè)置：

css可以通過為表格table與td標(biāo)簽設(shè)置white-space:nowrap;樣式使表格內(nèi)文字不換行。

代碼如下：

/*讓單元格內(nèi)容過多時也不換行*/
#datasTablediv table td{
white-space: nowrap;
}

white-space 屬性設(shè)置如何處理元素內(nèi)的空白。

這個屬性聲明建立布局過程中如何處理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

屬性值：

normal 默認(rèn)?？瞻讜粸g覽器忽略。

pre 空白會被瀏覽器保留。其行為方式類似 html 中的 <pre> 標(biāo)簽。

nowrap 文本不會換行，文本會在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。

pre-wrap 保留空白符序列，但是正常地進(jìn)行換行。

pre-line 合并空白符序列，但是保留換行符。

inherit 規(guī)定應(yīng)該從父元素繼承 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>此處文本超過設(shè)定的寬度</td></tr>
</table>

讀到這里，這篇“css表格的單元格不換行如何實現(xiàn)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。