css overflow溢出隱藏(文字溢出時的自動隱藏處理)
我要評論overflow 屬性說明:
版本：CSS2 兼容性：IE4+ NS6+ 繼承性：無
語法：overflow : visible | auto | hidden | scroll
相關(guān)參數(shù)說明如下：
visible:：不剪切內(nèi)容也不添加滾動條。假如顯式聲明此默認(rèn)值，對象將被剪切為包含對象的window或frame的大小。并且clip屬性設(shè)置將失效。
auto：此為body對象和textrea的默認(rèn)值。在需要時剪切內(nèi)容并添加滾動條
hidden：不顯示超過對象尺寸的內(nèi)容。
scroll：總是顯示滾動條。
使用說明及要點(diǎn)：
◎ 檢索或設(shè)置當(dāng)對象的內(nèi)容超過其指定高度及寬度時如何管理內(nèi)容。
◎ 設(shè)置textarea對象為hidden值將隱藏其滾動條。
◎ 對于table來說，假如table-layout屬性設(shè)置為fixed，則td對象支持帶有默認(rèn)值為hidden的overflow屬性。如果設(shè)為hidden，scroll或者auto，那么超出td尺寸的內(nèi)容將被剪切。如果設(shè)為visible，將導(dǎo)致額外的文本溢出到◎ 右邊或左邊（視direction屬性設(shè)置而定）的單元格。
◎ 自IE5開始，此屬性在MAC平臺上可用。 對應(yīng)的腳本特性為overflow。
示例：
body { overflow: hidden; }
div { overflow: scroll; height: 100px; width: 100px; }
text-overflow版本：IE6+專有屬性 繼承性：無
div 溢出隱藏 div文字溢出用點(diǎn)(省略號)代替
在div布局中內(nèi)容溢出了容器，超出了容器所限定的寬度應(yīng)該怎么辦呢？很是疑惑，于是搜集整理一番，發(fā)現(xiàn)可以讓內(nèi)容超出容器時超出部分顯示省略號，這種做法不僅解決了問題，而且很美觀，好了，不多說了，有興趣的朋友可以參考下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>div中溢出文字用點(diǎn)代替的代碼</title>
<style type="text/css">
/*<![CDATA[*/
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
/*]]>*/
</style>
</head>
<body>
<ul>
<li><a href="#">web標(biāo)準(zhǔn)常見問題大全web標(biāo)準(zhǔn)常見問題大全</a></li>
<li><a href="#">web標(biāo)準(zhǔn)常見問題大全web標(biāo)準(zhǔn)常見問題大全</a></li>
<li><a href="#">web標(biāo)準(zhǔn)常見問題大全web標(biāo)準(zhǔn)常見問題大全</a></li>
<li><a href="#">web標(biāo)準(zhǔn)常見問題大全web標(biāo)準(zhǔn)常見問題大全</a></li>
<li><a href="#">web標(biāo)準(zhǔn)常見問題大全web標(biāo)準(zhǔn)常見問題大全</a></li>
</body>
</html>
TD也可以溢出隱藏顯示
或許我這篇文章一取這樣的名字，就會有人要問了：你怎么還在關(guān)注table啊，那早就過時了…趕緊Xhtml…div好…ul好…ol好…dl好…完了，不知道還有什么好了。
table真的過時了么？你真的了解table么？你真的會用table么？
打口水仗不是我們要做的，留給那些時間很充裕的人吧。
言歸正傳：
不記得是什么時候，有人在用table模擬DataGrid的時候說，為什么td超出設(shè)置為固定寬度的文字不能隱藏，而是會直接換行呢？
是的，事實(shí)確實(shí)如此，如：
<style type="text/css">
table {width:500px;table-layout:fixed;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
td {white-space:nowrap;overflow:hidden;}
</style>
<table border="1" cellspacing="0" summary="回頭來看看Table：TD也玩overflow:hidden">
<tr>
<td class="col1">神舟 優(yōu)雅Q400N</td>
<td class="col2">優(yōu)雅Q400N，采用Intel Core2 Duo(Merom) T5450(1.66G)處理器</td>
<td class="col3">迅馳4平臺，突出的性價比，漂亮的外觀</td>
</tr>
</table>
運(yùn)行如上代碼，你會發(fā)現(xiàn)單元格里超過固定寬度的文字不會被隱藏掉，而是換行顯示了，顯然，這并不是我的本意。
看起來，這似乎是table的一個特性，它不能很好的支持{width:*px;white-space:nowrap;overflow:hidden;}的組合，說到底就是white-space:nowrap這個東東沒起作用，所以看起來overflow:hidden就失效了。{注：如果是一連串的無意義字符則可生效，例如：<td class="col1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>，這個時候就不需要{white-space:nowrap}來強(qiáng)制它在一行內(nèi)顯示，因?yàn)檫@一連串的a會被認(rèn)定為是一個字而不發(fā)生換行，從而超出.col1寬度的a會被隱藏}
［解決方案一：］
后來有人提到使用百分比寬度就可以了，經(jīng)測試，確實(shí)可以，稍微將第一段的其中幾行樣式修改一下，其它的不變：
.col1 {width:20%;}
.col2 {width:40%;}
.col3 {width:40%;}
將修改后的代碼運(yùn)行后，會發(fā)現(xiàn)，超出寬度的文字果然被隱藏了，想要的效果似乎得到了。
事實(shí)上使用百分比寬度確實(shí)可以解決這個文字隱藏的問題，但這似乎并不是想要的最佳的解決方案，因?yàn)橛械臅r候我們需要的是一個固定的寬度，而不是百分比寬度。
而這一切的根源就在于如何使得單元格內(nèi)的文字不換行在一行內(nèi)顯示。
?。劢鉀Q方案二：］
要達(dá)到這個要求，除了使用樣式，我們也許還會想到一個許久不用了的標(biāo)簽<nobr>，這個元素的作用就是強(qiáng)制內(nèi)容在一行顯示。以上代碼做如下修改，其它則不變：
<table border="1" cellspacing="0" summary="回頭來看看Table：TD也玩overflow:hidden">
<tr>
<td class="col1"><nobr>神舟 優(yōu)雅Q400N</nobr></td>
<td class="col2"><nobr>優(yōu)雅Q400N，采用Intel Core2 Duo(Merom) T5450(1.66G)處理器</nobr></td>
<td class="col3"><nobr>迅馳4平臺，突出的性價比，漂亮的外觀</nobr></td>
</tr>
</table>
做了這個修改，會發(fā)現(xiàn)，效果確實(shí)達(dá)到，是不是該興奮呢？不，這似乎還不是最佳的解決方案，因?yàn)楫吘故褂昧艘粋€許久不用且不推薦使用的元素標(biāo)記，這多少讓人覺得有點(diǎn)不爽。
沿著這個思路，我換了一個角度來考慮這個問題，發(fā)現(xiàn)問題迎刃而解。
既然在固定寬度的單元格內(nèi)無法只簡單的給th,td加上white-space:nowrap，那么我們在固定寬度的單元格內(nèi)再加一個標(biāo)記元素呢？
最佳方案：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>回頭來看看Table：TD也玩overflow:hidden</title>
<style type="text/css">
table {width:500px;table-layout:fixed;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
th strong {display:block;width:100%;}
tr strong,tr td {white-space:nowrap;overflow:hidden;}
</style>
</head>
<body>
<table border="1" cellspacing="0" summary="測試">
<thead>
<tr>
<th class="col1"><strong>產(chǎn)品名稱</strong></th>
<th class="col2"><strong>產(chǎn)品介紹</strong></th>
<th class="col3"><strong>產(chǎn)品備注</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>神舟 優(yōu)雅Q400N</td>
<td>優(yōu)雅Q400N，2007年7月上市，采用Intel Core2 Duo(Merom) T5450(1.66G)處理器</td>
<td>迅馳4平臺，突出的性價比，漂亮的外觀</td>
</tr>
</tbody>
</table>
</body>
</html>
運(yùn)行上面的代碼，會發(fā)現(xiàn)這樣的做法是可以的，而且從代碼的簡潔性、可讀性和合理性幾方面來說，都較前幾種方案為好。
{還沒有做過給單元格隱藏超過固定寬度內(nèi)容的同學(xué)，可先在機(jī)器上玩玩，然后再來看本文}
其實(shí)table是一個有趣，可玩性很高東東。我們不應(yīng)該帶著有色眼睛去看它，因?yàn)樗兴嬖诘牡览怼?/p>
之后會繼續(xù)寫一些關(guān)于table的文章，也作自娛之用。
相關(guān)文章
css overflow: hidden 的用法(溢出隱藏及清除浮動)
overflow:hidden是經(jīng)常用到的一個css屬性，它有兩種常用用法：溢出隱藏和清除浮動，這里就為大家介紹一下,需要的朋友可以參考下2020-03-13
當(dāng)容器中的文本內(nèi)容超出容器的寬度或高度時，就會出現(xiàn)文本溢出的情況，本文主要介紹了css溢出隱藏的幾種方法實(shí)現(xiàn)，具有一定的參考價值，感興趣的可以了解一下2024-02-19
