table表格中的內(nèi)容溢出應(yīng)該如何處理

什么是內(nèi)容溢出呢？其實(shí)就是當(dāng)文字很多的時候，如果內(nèi)容區(qū)域只有那么長，那么多出的部分以點(diǎn)點(diǎn)點(diǎn)代替。

這次做的案例是在table里面，我們知道當(dāng)我們在table里輸入過多的文字內(nèi)容的時候會撐亂表格，例如一行顯示過長或者自動換行。可是有的時候我們就想在固定寬度的一行中顯示，如果多出的部分那就用點(diǎn)點(diǎn)點(diǎn)代替，這樣就不會撐亂表格了。那么該如何做呢？

一般來說我們會用到如下屬性

/*溢出部分樣式*/  
.txt-ell {   
    whitewhite-space:nowrap;  //強(qiáng)制在一行顯示   
    overflow:hidden;    //溢出的內(nèi)容切割隱藏   
    text-overflow:ellipsis; //當(dāng)內(nèi)聯(lián)溢出塊容器時，將溢出部分替換為…   
    word-break:keep-all;  //允許在單詞內(nèi)換行   
    color: red;  //這里我自己標(biāo)識一下   
    padding: 0 7px;  //由于想跟邊線留有距離，所以設(shè)置了下   
}

.table-fix {   
    table-layout:fixed;     
}

首先第二個樣式是專門給table標(biāo)簽加的，想要實(shí)現(xiàn)內(nèi)容溢出，那么表格必須有固定的寬高，表格內(nèi)部的tr，td也要有固定的寬高。在用內(nèi)容溢出之前，先要給table添加table-fix這個類。然后檢查自己的tr，td有沒有給width，如果沒有的話，最好是給個吧，固定的也行，百分比的也行，我主要給的百分比，外邊table給固定寬度，里面的tr和td就是百分比的寬度，這樣才能使用內(nèi)容溢出樣式。最后如果哪個格子里面的內(nèi)容非常的多，你想實(shí)現(xiàn)點(diǎn)點(diǎn)點(diǎn)，就給這個格子添加一個.txt-ell的類吧

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

HTML基礎(chǔ)知識，關(guān)于超鏈接設(shè)置的樣式的詳細(xì)介紹

HTML段落的知識總結(jié)

HTML文本格式的知識總結(jié)

以上就是table表格中的內(nèi)容溢出應(yīng)該如何處理的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！