Detailed explanation of overflow hiding (overflow) examples in CSS
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
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; }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>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> 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. {注：如果是一连串的无意义字符则可生效，例如：
[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%;}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
<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）的实例详解，相信下伙伴么可以进一步的了解！ 还没有做过给单元格隐藏超过固定宽度内容的同学，可先在机器上玩玩，然后再来看本文
相关推荐：
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!
What is CSS Grid?Apr 30, 2025 pm 03:21 PMCSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.
What is CSS flexbox?Apr 30, 2025 pm 03:20 PMArticle discusses CSS Flexbox, a layout method for efficient alignment and distribution of space in responsive designs. It explains Flexbox usage, compares it with CSS Grid, and details browser support.
How can we make our website responsive using CSS?Apr 30, 2025 pm 03:19 PMThe article discusses techniques for creating responsive websites using CSS, including viewport meta tags, flexible grids, fluid media, media queries, and relative units. It also covers using CSS Grid and Flexbox together and recommends CSS framework
What does the CSS box-sizing property do?Apr 30, 2025 pm 03:18 PMThe article discusses the CSS box-sizing property, which controls how element dimensions are calculated. It explains values like content-box, border-box, and padding-box, and their impact on layout design and form alignment.
How can we animate using CSS?Apr 30, 2025 pm 03:17 PMArticle discusses creating animations using CSS, key properties, and combining with JavaScript. Main issue is browser compatibility.
Can we add 3D transformations to our project using CSS?Apr 30, 2025 pm 03:16 PMArticle discusses using CSS for 3D transformations, key properties, browser compatibility, and performance considerations for web projects.(Character count: 159)
How can we add gradients in CSS?Apr 30, 2025 pm 03:15 PMThe article discusses using CSS gradients (linear, radial, repeating) to enhance website visuals, adding depth, focus, and modern aesthetics.
What are pseudo-elements in CSS?Apr 30, 2025 pm 03:14 PMArticle discusses pseudo-elements in CSS, their use in enhancing HTML styling, and differences from pseudo-classes. Provides practical examples.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
SublimeText3 Chinese version
Chinese version, very easy to use
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
SublimeText3 Mac version
God-level code editing software (SublimeText3)
