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:
1 |
|
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:
1 2 |
|
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
|
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
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:
1 2 3 |
|
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
1 2 3 4 5 6 7 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
|
总结:
本文详细介绍了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!