關(guān)于table表格中的內(nèi)容溢出布局的解決方法

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

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

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

　　CSS Code復(fù)制內(nèi)容到剪貼板 /*溢出部分樣式*/ .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:07px;//由于想跟邊線留有距離，所以設(shè)置了下 }CSS Code復(fù)制內(nèi)容到剪貼板 .table-fix{ table-layout:fixed; }

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

【table表格中的內(nèi)容溢出布局的解決方法】相關(guān)文章：

Excel表格中如何換行04-02

網(wǎng)頁設(shè)計的布局12-06

常見的網(wǎng)頁布局設(shè)計04-21

Excel表格中怎么徹底隱藏數(shù)據(jù)02-24

Dreamweaver窗口如何布局的方法02-07

網(wǎng)頁設(shè)計的布局的方式有哪些09-01

建筑施工合同中的必備內(nèi)容11-17

網(wǎng)頁設(shè)計要明確的那些布局細(xì)節(jié)12-20

建設(shè)完美網(wǎng)站布局的20個步驟10-26

英語四級作文布局10-20