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!
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
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
How to insert pictures on bootstrap
Apr 07, 2025 pm 03:30 PM
There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
How to use bootstrap button
Apr 07, 2025 pm 03:09 PM
How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text
How to resize bootstrap
Apr 07, 2025 pm 03:18 PM
To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
