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

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

創(chuàng)新互聯(lián)公司主營沁源網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶App定制開發(fā),沁源h5成都小程序開發(fā)搭建,沁源網(wǎng)站營銷推廣歡迎沁源等地區(qū)企業(yè)咨詢

css表格的單元格不換行的實(shí)現(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)容過多時(shí)也不換行*/
#datasTablediv table td{
white-space: nowrap;
}

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

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

屬性值：

normal 默認(rèn)。空白會(huì)被瀏覽器忽略。

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

nowrap 文本不會(huì)換行，文本會(huì)在在同一行上繼續(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表格的單元格不換行如何實(shí)現(xiàn)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前題目：css表格的單元格不換行如何實(shí)現(xiàn)
網(wǎng)站鏈接：http://bm7419.com/article26/gipecg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、微信小程序、動(dòng)態(tài)網(wǎng)站、商城網(wǎng)站、營銷型網(wǎng)站建設(shè)、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)