Detailed explanation of overflow hiding (overflow) examples in CSS-CSS Tutorial-php.cn

In WEB front-end development, we often encounter overflow of content in DIV, which affects the beauty of the page. So how do we hide the overflow? I believe everyone will definitely think of overflow in CSS. , today I will introduce you to the detailed explanation of overflow hiding (overflow) in CSS!

overflow attribute description:

Version: CSS2 Compatibility: IE4+ NS6+ Inheritance: None
Syntax:

overflow : visible | auto | hidden | scroll

Copy after login

Related parameter descriptions are as follows:

visible:: Does not cut content or add scroll bars. If this default value is explicitly declared, the object will be clipped to the size of the window or frame containing the object. And the clip attribute setting will be invalid.
auto: This is the default value of the body object and textrea. Cut content and add scroll bars when needed
hidden: Do not display content that exceeds the size of the object.
scroll: Always display scroll bars.

Usage instructions and key points:

◎ Retrieve or set how to manage the content when the content of the object exceeds its specified height and width.
◎ Setting the textarea object to the hidden value will hide its scroll bars.
◎ For table, if the table-layout attribute is set to fixed, the td object supports the overflow attribute with the default value of hidden. If set to hidden, scroll or auto, content exceeding the td size will be cut. If set to visible, it will cause extra text to overflow to the cells to the right or left of ◎ (depending on the direction property setting).
◎ Starting from IE5, this property is available on MAC platform. The corresponding script feature is overflow.

Example:

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

Copy after login

text-overflowVersion: IE6+ Proprietary properties Inheritance: None

div overflow hidden div text overflow is used Dot (ellipsis) instead of
. What should I do if the content overflows the container in the div layout and exceeds the width limited by the container? I was very confused, so I collected and sorted it out, and found that I can make the content exceed the container to display ellipses. This approach not only solves the problem, but also very beautiful. Well, I won’t say more, and interested friends can refer to it

<!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>

Copy after login

TD can also overflow, hide and display

Maybe as soon as I name this article like this, someone will ask: Why are you still paying attention to the table? That has long been outdated...Hurry up Xhtml...div is good...ul is good...ol is good...dl is good...it's over, I don't know what else is better.

Is table really outdated? Do you really understand table? Do you really know how to use tables?

Fighting with words is not what we want to do, leave it to those who have plenty of time.

Let’s get back to the topic:

I don’t remember when, when someone was using a table to simulate the DataGrid, they asked why the text in the td that exceeds the fixed width cannot be hidden, but will wrap directly?

Yes, this is indeed the case, such as:

<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>

Copy after login

Run the above code, you will find that the text in the cell that exceeds the fixed width will not be hidden, but It is displayed in a new line. Obviously, this is not my intention.

It seems that this is a feature of table. It cannot well support the combination of {width:*px;white-space:nowrap;overflow:hidden;}. In the final analysis, it is white-space: nowrap doesn't work, so it seems that overflow:hidden is invalid. {注：如果是一连串的无意义字符则可生效，例如：aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa，这个时候就不需要{white-space:nowrap}来强制它在一行内Display, because this series of a's will be recognized as one word and no line breaks will occur, so a's that exceed the width of .col1 will be hidden}

　　[Solution 1:]

Later someone It is mentioned that using the percentage width is enough. After testing, it is indeed possible. Slightly modify the style of a few lines in the first paragraph and leave the others unchanged:

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

Copy after login

After running the modified code, you will find that , the text that exceeds the width is indeed hidden, and the desired effect seems to be achieved.

In fact, using percentage width can indeed solve the problem of text hiding, but this does not seem to be the best solution, because sometimes what we need is a fixed width, not a percentage. width.

The root of all this is how to make the text in the cell display in one line without wrapping.

　[Solution 2:]

To achieve this requirement, in addition to using styles, we may also think of a tag that has not been used for a long time. The function of this element is to force content Displayed in one line. Make the following modifications to the above code, leaving the others unchanged:

<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>

Copy after login

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

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

　　既然在固定宽度的单元格内无法只简单的给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>

Copy after login

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

总结：

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

相关推荐：

关于溢出隐藏的详细介绍

分享文字溢出隐藏实例

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

The above is the detailed content of Detailed explanation of overflow hiding (overflow) examples in CSS. For more information, please follow other related articles on the PHP Chinese website!