table表格中的內容溢出應該如何處理

這次帶給大家table表格中的內容溢出應該如何處理，處理table表格中的內容溢出的注意事項有哪些，下面就是實戰案例，一起來看一下。

什麼是內容溢出呢？其實就是文字很多的時候，如果內容區域只有那麼長，那麼多出來的部分以點點代替。

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

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

/*溢出部分样式*/  
.txt-ell {   
    whitewhite-space:nowrap;  //强制在一行显示   
    overflow:hidden;    //溢出的内容切割隐藏   
    text-overflow:ellipsis; //当内联溢出块容器时，将溢出部分替换为…   
    word-break:keep-all;  //允许在单词内换行   
    color: red;  //这里我自己标识一下   
    padding: 0 7px;  //由于想跟边线留有距离，所以设置了下   
}

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

首先第二個樣式是專門給table標籤加的，想要實現內容溢出，那麼表格必須有固定的寬高，表格內部的tr，td也要有固定的寬高。在用內容溢位之前，先要為table加上table-fix這個類別。然後檢查自己的tr，td有沒有給width，如果沒有的話，最好是給個吧，固定的也行，百分比的也行，我主要給的百分比，外邊table給固定寬度，裡面的tr和td就是百分比的寬度，這樣才能使用內容溢出樣式。最後如果哪個格子裡面的內容非常的多，你想實現點點點，就給這個格子添加一個.txt-ell的類吧

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

HTML基礎知識，關於超連結設定的樣式的詳細介紹

HTML段落的知識總結

HTML文字格式的知識摘要

#

以上是table表格中的內容溢出應該如何處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！