table表格中的內容溢出布局方式


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

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

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

/*溢出部分樣式*/
.txt-ell {
    white-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的類吧


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM