[Strong] compatible with multiple browsers, and compatible with Div, P, and TD force-not line breaks and force line breaks

Http://tieba.baidu.com/F? Kz= 669728589

 

The topic about force-not-wrap and force-Wrap has been discussed on the Internet for countless times. However, I have found that they are not comprehensive enough and I have not fully considered various browsers and labels, which leads to incompatibility, so let me talk about it again. Since Div and P have the same effect in the discussion in this article, P is omitted.

In this document, "TD with no specified width" means that the width is specified for the table, but the width is not specified for the TD.

Force do not wrap

Div,
TD
{
White-space: nowrap;
}
This is no problem in Firefox's Div, TD, and IE's Div. It is complicated in IE's TD:

If the width is not specified for TDCodeStill valid.
If the width is specified for TD, and there is no punctuation or space in the text, the above Code is no longer valid. You can add word-break: Keep-all; to solve this problem. This is the content of css3, but it was first proposed by IE, so it is also supported by ie6.
If the width is specified for TD and the text contains punctuation or spaces. You can set a div between text and TD to solve the problem.
To make it simple, use:

Div
{
White-space: nowrap;
}
To be compatible with the different situations of IE's TD, set a div between the text and TD.

Force line feed

Forced line breaks are used to avoid large la s when encountering super-long continuous strings (such as aaaaaaaaaaaaa.

Div,
TD
{
Word-break: Break-all;
}
Word-wrap: Break-word; compatibility is not wide enough, so we use Word-break: Break-all ;. The above code is compatible with IE, chrome Div, TD with the specified width, and TD without the specified width. It is very good. Unfortunately, Firefox does not support this attribute, so it has no effect, in order not to squeeze out tables, you can add overflow: hidden to solve the problem.

Knowing why

Three attributes are described above:

White-space: normal | nowrap
Word-wrap: normal | break-word
Word-break: normal | break-All | keep-all
White-space

The blank processing method has more than two attribute values, but only these two values are supported in IE6.

In normal mode, multiple consecutive English spaces are compressed into one English space. A line break is allowed in the blank space.
Nowrap forces all text to be displayed in the same row until the text ends or the BR object is encountered.
Word-wrap

Whether to disconnect or not when the content exceeds the container boundary.

Normal allows (only allows, not mandatory) the content to open the specified container boundary.
The break-word content will wrap in the boundary.
Word-break

Line feed.

The normal English line breaks in punctuation and blank spaces, and the Chinese line breaks anywhere.
Break-all breaks a line anywhere in English and Chinese, for example, breaking a line break from the middle of an English word.
Both the Keep-all English and Chinese are wrapped in punctuations and spaces.