Examples of overflow hiding (overflow) in CSS

We are in the Web front-end development, many times in the div content overflow situation will often encounter, resulting in page aesthetics, then how we let overflow hidden, I believe you will think of CSS overflow, Today, we introduce you to the example of overflow hiding (overflow) in CSS.

Overflow Property Description:

Version: CSS2 compatibility: ie4+ ns6+ Inheritance: None
Grammar:

overflow:visible | Auto | Hidden | Scroll

The relevant parameters are described as follows:

Visible:: Do not cut content or add scroll bars. If this default value is explicitly declared, the object is clipped to the size of the window or frame that contains the object. and the Clip property setting is invalidated.
Auto: This is the default value for the Body object and Textrea. Cut content and add scroll bars when needed
Hidden: does not display content that exceeds the size of the object.
Scroll: Scroll bars are always displayed.

Instructions and points for use:

Retrieves or sets how content is managed when the object's content exceeds its specified height and width.
Setting the TextArea object to a hidden value hides its scroll bar.
For table, if the Table-layout property is set to fixed, the TD object supports a overflow property with a default value of hidden. If set to Hidden,scroll or auto, then the content beyond the TD size will be clipped. If set to visible, causes additional text to overflow to the right or left (depending on the direction property setting) of the cell.
This property is available on the Mac platform from IE5 onwards. The corresponding script attribute is overflow.

Example:

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

Text-overflow version: ie6+ proprietary attribute inheritance: None

div overflow hidden div text overflow with dot (ellipsis) instead of
What happens when the content in the div layout overflows the container beyond the container's defined width? is very confused, so collect and tidy up, found that can let the content beyond the container to display the ellipsis, this practice not only solves the problem, but also very beautiful, good, not to say, interested friends can refer to the next

<! 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" > 
TD can also overflow hidden display

Perhaps when I take such a name in this article, someone will ask: "Why are you still looking at table Ah, that's already out of date ..." Hurry Xhtml...div ... ul good ... ol good ... dl good ... It's over, I don't know what else is good.

Is the table really out of date? Do you really know the table? Can you really use table?

It's not what we do, it's for people who have plenty of time to fight.

Anyway

I do not remember when someone used the table to simulate the DataGrid when said, why TD beyond the fixed width of the text can not be hidden, but will be directly wrapped it?

Yes, that's true, like this:

<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= "Look Back Table:td also play Overflow:hidden" ><tr><td class= "Col1" > Shenzhou Elegance q400n</td><td class= "col2" > Elegant q400n with Intel Core2 Duo (Merom) T5450 (1.66G) processor </td ><TD class= "Col3" > Centrino 4 Platform, outstanding price-performance ratio, beautiful appearance </td></tr></table>

Running the code above, you will find that the text in the cell exceeds the fixed width will not be hidden, but instead of the line display, obviously, this is not my intention.

It seems that this is a feature of table, it does not support {Width:*px;white-space:nowrap;overflow:hidden;} The combination, in the final analysis is white-space:nowrap this thing did not work, so it seems that Overflow:hidden will expire. {Note: If it is a series of meaningless characters it can take effect, for example: <td class= "Col1" >AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</TD> At this time, you do not need {White-space : nowrap} to force it to appear in a row, because this sequence of a will be identified as a word without a newline, thus exceeding the. col1 width of a will be hidden}

[Solution One:]

Later, it was mentioned that using percent width is OK, tested, yes, slightly the first paragraph of a few of the lines of the style modified, the other unchanged:

. col1 {width:20%;}. col2 {width:40%;}. col3 {width:40%;}
After you run the modified code, you will find that the text beyond the width is hidden and the desired effect seems to have been obtained.

In fact, the use of percent width does solve the problem of the hidden text, but this does not seem to be the best solution, because sometimes we need a fixed width instead of a percent width.

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

[Solution Two:]

To achieve this, in addition to the use of style, we may also think of a long-unused label <nobr>, the role of this element is to force the content to be displayed on one line. The above code is modified as follows, others unchanged:

<table border= "1" cellspacing= "0" summary= "Look Back Table:td also play Overflow:hidden" ><tr><td class= "col1" > <nobr> Shenzhou Elegance Q400n</nobr></td><td class= "col2" ><nobr> elegant q400n with Intel Core2 Duo (Merom) T5450 (1.66G) processor </nobr></td><td class= "Col3" ><nobr> Centrino 4 Platform, outstanding price-performance ratio, beautiful appearance </nobr></ Td></tr></table>
Do this change, will find that the effect is indeed achieved, is not the excitement? No, it doesn't seem like the best solution, because after all, it's a bit uncomfortable to use an element tag that's been used for a long time and is deprecated.

Along this line of thinking, I changed an angle to consider the problem and found the problem solved.

Since you cannot simply add white-space:nowrap to TH,TD in a fixed-width cell, do we add a tag element to the fixed-width cell?

Best solution:

<! 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" >
Running the above code, you will find that this is possible, and from the simplicity of the code, readability and rationality of several aspects, are better than the previous scenarios.

Summarize:

This article describes in detail the CSS overflow hidden (overflow) instance of the detailed, I believe that the next partner can further understand! Have not done to the cell hidden beyond the fixed-width of the students, you can first play on the machine, and then see this article

Related recommendations:

A detailed introduction to overflow hiding

Share text overflow hidden instances

Overflow Concealment: The most comprehensive solution to the content overflow problem using CSS