首頁 > 文章 > web前端 > CSS中溢出隱藏（overflow）的實例詳解

CSS中溢出隱藏（overflow）的實例詳解

黄舟原創: 2017-11-22 09:26:237657瀏覽

我們在WEB前端開發中，很多時候在DIV中內容的溢出情況會經常遇到，導致頁面的美觀性，那麼我們如何讓溢出隱藏呢，相信大家一定會想到CSS中的overflow ，今天就帶大家介紹下CSS中溢出隱藏（overflow）的實例詳解！

overflow 屬性說明:

版本：CSS2　相容性：IE4+ NS6+　繼承性：無
語法：

overflow : visible | auto | hidden | scroll

相關參數說明如下：

#visible:：不剪下內容也不新增捲軸。假如明確宣告此預設值，物件將被剪下為包含物件的window或frame的大小。並且clip屬性設定將失效。
auto：此為body物件和textrea的預設值。在需要時剪下內容並新增捲軸
hidden：不顯示超過物件尺寸的內容。
scroll：總是顯示捲軸。

使用說明及重點：

◎ 擷取或設定當物件的內容超過其指定高度及寬度時如何管理內容。
◎ 設定textarea物件為hidden值將隱藏其捲軸。
◎ 對於table來說，假如table-layout屬性設定為fixed，則td物件支援帶有預設值為hidden的overflow屬性。如果設為hidden，scroll或auto，那麼超出td尺寸的內容將被剪切。如果設為visible，將導致額外的文字溢出到◎ 右邊或左邊（視direction屬性設定而定）的單元格。
◎ 自IE5開始，此屬性在MAC平台上可用。對應的腳本特性為overflow。

範例：

body { overflow: hidden; }
div { overflow: scroll; height: 100px; width: 100px; }

text-overflow版本：IE6+專有屬性繼承性：無

div 溢出隱藏div文字溢出用點(省略號)代替
在div佈局中內容溢出了容器，超出了容器所限定的寬度該怎麼辦呢？很是疑惑，於是蒐集整理一番，發現可以讓內容超出容器時超出部分顯示省略號，這種做法不僅解決了問題，而且很美觀，好了，不多說了，有興趣的朋友可以參考下

<!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"> 
<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中溢出文字用点代替的代码</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标准常见问题大全web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
</body> 
</html>

TD也可以溢出隱藏顯示

或許我這篇文章一取這樣的名字，就會有人要問了：你怎麼還在關注table啊，那早就過時了…趕緊Xhtml…div好…ul好…ol好…dl好…完了，不知道還有什麼好了。

　　table真的過時了麼？你真的了解table麼？你真的會用table麼？

　　打口水仗不是我們要做的，留給那些時間很充裕的人吧。

　　言歸正傳：

　　不記得是什麼時候，有人在用table模擬DataGrid的時候說，為什麼td超出設定為固定寬度的文字不能隱藏，而是會直接換行呢？

　　是的，事實確實如此，如：

<style type="text/css">
table {width:500px;;}
.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">神舟 优雅Q400N</td>
<td class="col2">优雅Q400N，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td>
<td class="col3">迅驰4平台，突出的性价比，漂亮的外观</td>
</tr>
</table>

#運行如上程式碼，你會發現單元格里超過固定寬度的文字不會被隱藏掉，而是換行顯示了，顯然，這不是我的本意。

　　看起來，這似乎是table的一個特性，它不能很好的支援{width:*px;white-space:nowrap;overflow:hidden;}的組合，說到底就是white-space: nowrap這個東東沒起作用，所以看起來overflow:hidden就失效了。 {註：如果是一連串的無意義字元則可生效，例如：566770df0775f3e1934702e4353c78d9aaaaaaaaaaaaaaaaaaaaaaaaaaaaab90dd5946f0946207856a8a37f441edf，這個時候就不需要{white-space:nowrap}來強制它在一行內顯示，因為這一連串的a會被認定為是一個字而不發生換行，從而超出.col1寬度的a會被隱藏}

　　［解決方案一：］

　　後來有人提到使用百分比寬度就可以了，經測試，確實可以，稍微將第一段的其中幾行樣式修改一下，其它的不變：

.col1 {width:20%;}
.col2 {width:40%;}
.col3 {width:40%;}

將修改後的程式碼運行後，會發現，超出寬度的文字果然被隱藏了，想要的效果似乎得到了。

　　事實上使用百分比寬度確實可以解決這個文字隱藏的問題，但這似乎不是想要的最佳的解決方案，因為有的時候我們需要的是一個固定的寬度，而不是百分比寬度。

　　而這一切的根源就在於如何使得儲存格內的文字不換行在一行內顯示。

　　［解決方案二：］

　　要達到這個要求，除了使用樣式，我們也許還會想到一個許久不用了的標籤f44a345470ed5309298c118c07c6efac，這個元素的作用就是強制內容在一行顯示。以上程式碼做如下修改，其它則不變：

<table border="1" cellspacing="0" summary="回头来看看Table：TD也玩overflow:hidden">
<tr>
<td class="col1"><nobr>神舟 优雅Q400N</nobr></td>
<td class="col2"><nobr>优雅Q400N，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</nobr></td>
<td class="col3"><nobr>迅驰4平台，突出的性价比，漂亮的外观</nobr></td>
</tr>
</table>

做了这个修改，会发现，效果确实达到，是不是该兴奋呢？不，这似乎还不是最佳的解决方案，因为毕竟使用了一个许久不用且不推荐使用的元素标记，这多少让人觉得有点不爽。

　　沿着这个思路，我换了一个角度来考虑这个问题，发现问题迎刃而解。

　　既然在固定宽度的单元格内无法只简单的给th,td加上white-space:nowrap，那么我们在固定宽度的单元格内再加一个标记元素呢？

最佳方案：

<!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;;}
.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>产品名称</strong></th>
<th class="col2"><strong>产品介绍</strong></th>
<th class="col3"><strong>产品备注</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>神舟 优雅Q400N</td>
<td>优雅Q400N，2007年7月上市，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td>
<td>迅驰4平台，突出的性价比，漂亮的外观</td>
</tr>
</tbody>
</table>
</body>
</html>

运行上面的代码，会发现这样的做法是可以的，而且从代码的简洁性、可读性和合理性几方面来说，都较前几种方案为好。

总结：

本文详细介绍了CSS中溢出隐藏（overflow）的实例详解，相信下伙伴么可以进一步的了解！还没有做过给单元格隐藏超过固定宽度内容的同学，可先在机器上玩玩，然后再来看本文

相关推荐：

关于溢出隐藏的详细介绍

分享文字溢出隐藏实例

溢出隐藏：最全的利用css解决内容溢出问题的几种方案

以上是CSS中溢出隱藏（overflow）的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：html裡的超連結標籤下一篇：html裡的超連結標籤

看更多