關於table表格中的內容溢位佈局的解決方法

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

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

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

CSS Code複製內容到剪貼簿 /*溢位部分樣式*/ -ell{ whitewhite-space:nowrap;//強制在一行顯示 overflow:hidden;//溢位的內容切割隱藏 text-overflow:ellipsis;//當內聯溢位塊容器時，將溢位部分替換為… word-break:keep-all;//允許在單詞內換行 color:red;//這裡我自己標識一下 padding:07px;//由於想跟邊線留有距離，所以設定了下 }CSS Code複製內容到剪貼簿 e-fix{ table-layout:fixed; }

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