什么是內容溢出呢？其實就是當文字很多的時候，如果內容區域只有那么長，那么多出的部分以點點點代替。
這次做的案例是在table里面，我們知道當我們在table里輸入過多的文字內容的時候會撐亂表格，例如一行顯示過長或者自動換行。可是有的時候我們就想在固定寬度的一行中顯示，如果多出的部分那就用點點點代替，這樣就不會撐亂表格了。那么該如何做呢？
一般來說我們會用到如下屬性
CSS Code復制內容到剪貼板
-
- .txt-ell {
- whitewhite-space:nowrap; //強制在一行顯示
- overflow:hidden; //溢出的內容切割隱藏
- text-overflow:ellipsis; //當內聯溢出塊容器時，將溢出部分替換為…
- word-break:keep-all; //允許在單詞內換行
- color: red; //這里我自己標識一下
- padding: 0 7px; //由于想跟邊線留有距離，所以設置了下
- }
CSS Code復制內容到剪貼板
- .table-fix {
- table-layout:fixed;
- }
首先第二個樣式是專門給table標簽加的，想要實現內容溢出，那么表格必須有固定的寬高，表格內部的tr，td也要有固定的寬高。在用內容溢出之前，先要給table添加table-fix這個類。然后檢查自己的tr，td有沒有給width，如果沒有的話，最好是給個吧，固定的也行，百分比的也行，我主要給的百分比，外邊table給固定寬度，里面的tr和td就是百分比的寬度，這樣才能使用內容溢出樣式。最后如果哪個格子里面的內容非常的多，你想實現點點點，就給這個格子添加一個.txt-ell的類吧
以上這篇關于table表格中的內容溢出布局方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
原文地址：http://www.cnblogs.com/hanyining/archive/2016/05/25/5527668.html
