How to solve text overflow in css div_html/css_WEB-ITnose

When you see the title, you will easily think of cutting off the text and adding "...". Haha, that's it. In fact, writing this log is just to record this method, because it seems that many people still don’t remember how to deal with such a situation.

First of all, let me explain. Generally, if the text in a container using div css exceeds the length, it will float outside the frame or expand the frame. This is generally easy to solve, but I encountered such a problem today: in IE6 There was no response when I downloaded the test page, but the test page processed the overflow text normally under IE8. I was depressed. Isn't this overflow processing unique to IE? Why is IE6 not working properly? Later, I checked online and found out that it turns out that IE6 only supports overflow processing if it is written inside a div, while IE6 and above only support writing it inside

, so I wrote the same overflow processing code in a div and < li>It’s normal, sweat! ! ! Here is a screenshot of my processing:
The following is the code of the html page:
The following is the rendering (it will be the same after processing):

This is for IE6, this is for IE8 .

The following are the codes for the above two overflow processing:
This is the ie6 processing code, this is the ie8 processing code


The following are some processing methods on the Internet, which are worth reference :

General text truncation (applies to inline and block):
Example Source Code [www.mb5u.com]

.text-overflow {
display:block;/*Inline objects need to be added*/
width:31em;
word-break:keep-all;/* No line breaks*/
white-space:nowrap;/* No line breaks */
overflow:hidden;/* Hide the excess content when the content exceeds the width */
text-overflow:ellipsis;/* Display the ellipsis mark (...) when the text in the object overflows; needs to be used with Use together with overflow:hidden;. */
}

Definition of table text overflow:
Example Source Code [www.mb5u.com]

table{
width :30em;
table-layout:fixed;/* Only when the layout algorithm of the table is defined as fixed, the definition of td below can take effect. */
}
td{
width:100%;
word-break:keep-all;/* No line breaks*/
white-space:nowrap;/* No line breaks* /
overflow:hidden;/* Hide the excess content when the content exceeds the width*/
text-overflow:ellipsis;/* Display the ellipsis mark (...) when the text in the object overflows; needs to be used with overflow :hidden; used together. */
}

What you need to pay attention to is that this stuff only works on a single line of text. If you want to use it on multiple lines, only the first line will work. of. Only IE will have "..." in this way of writing. In other browsers, the text will be hidden when it exceeds the specified width.

In-depth study of text overflow processing in Opera and Firefox:
[Problem]
I recently discovered that when browsing under Opera, the right half of my space becomes super wide (I use The layout mode is exactly the same as yours), so that the horizontal scroll bar even appears when the display range exceeds 1024 and the window is maximized. According to the method you provided, after deleting all the modules, it is still like this. I am baffled. Solution...

I opened a new space with another pass, using the same layout, but there is no problem under Opera!

Is it because I tested the expanded space during the test? The space on the right, as well as adding a second html module [and then deleting it] and other operations, caused my space code to be messed up?

[Reason]

Different Browser compatibility issues, to be precise, are issues with the implementation of CSS standards by different browsers. First of all, you should know that not only does Opera display abnormally, but neither does Firefox. Since Firefox is a recognized standard browser [of course, so is Opera ], and has a higher market share, so Firefox is used for certification.

[Example]

1. Firefox does not support the ellipsis (...) attribute, that is, a long string will be displayed Ellipsis. text-overflow: ellipsis;
This is applied in the log options of the space log editing page. If you enter a long category name and come back to edit the log, you will find that the original category name will be displayed in front of IE. part, directly replace it with an ellipsis, and in browsers such as Firefox, it will be displayed for a long time until it breaks the interface frame.

2. In Firefox, style="overflow:hidden" only works on or etc.

3. In the fixed link section, IE browser can use the word-wrap attribute to wrap the string that exceeds the width, specifically the fixed link Once the address length exceeds 300px, it will automatically wrap. .bvwordwrap{word-wrap:break-word;width:300px;left:0}

In browsers such as Firefox, the word-wrap attribute is not recognized because this CSS attribute does not comply with W3 standards and should be replaced by white-space:normal; so that line breaks can be correct under FireFox and IE. Also note that spaces between words cannot be used  ;, otherwise the line break cannot be correct.