The difference between Word-wrap:break-word and Word-break:break-all;

Word-wrap is the control of line wrapping.
When you use Break-word, the line break is forced. There is no problem in Chinese, and the English sentence is fine. But for long strings of English, it doesn't work.

Word-break is the control of word breaking.
Break-all, is to break the word. The next letter is automatically to the next line when the word is to the border. It mainly solves the problem of long strings of English.

Line-wrapping CSS recommendation style compatible with IE and FF

The best way is

The following is a reference fragment: Word-wrap:break-word; Overflow:hidden;

Instead of

The following is a reference fragment: Word-wrap:break-word; Word-break:break-all;

It's not

The following is a reference fragment: Word-wrap:break-word; Overflow:auto;

There is no problem in IE, under FF, long strings of English will be obscured beyond the content.

The difference between Word-wrap and Word-break

Word-wrap:

Normal Default. Content exceeds the boundaries of its container.

Break-word Content wraps to next line, and a word-break occurs when necessary. Word-break is triggered when necessary.

Word-break:

Normal Default. Allows line breaking within words. It seems to work only on Asian text.

Break-all behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-asian text. This value was suited to Asian text that contains some excerpts of Non-asian text.

Keep-all Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same as normal for all Non-asian languages. This value was optimized for text that includes small amounts of Chinese, Japanese, or Korean.

Summarized as follows:

Word-wrap is the control of line wrapping.

When you use Break-word, the line break is forced. There is no problem in Chinese, and the English sentence is fine. But for long strings of English, it doesn't work.

Break-word is the control of word breaking.

Normal is the default and English words are not opened.

Break-all, is to break the word. The next letter is automatically to the next line when the word is to the border. It mainly solves the problem of long strings of English.

Keep-all, refers to Chinese, Japanese, and Korean constant words. That is, only use this time, do not word-wrap, Chinese will not be changed line. (The English statement is normal.) ）

IE under:

Use Word-wrap:break-word; all of them are normal.

FF under:

If these 2 are not used, the Chinese will not have any problems. There is no problem with the English sentence. However, long strings of English can be problematic.

In order to solve the long string of English, generally with word-wrap:break-word;word-break:break-all; However, this approach causes the words in the normal English sentence to be broken (ie also).

At present the main problem exists in long strings of English and English words are disconnected. In fact, long string of English is a relatively long word.

Should the English word should not be disconnected? The problem is obvious and obviously should not be disconnected.

For a long string of English, is malicious things, naturally do not have to tube. However, there are ways to keep the container from getting bigger.

Use: Overflow:auto; ie, the long string will automatically fold the line. FF, the long string will be covered.

Therefore, the best way is to Word-wrap:break-word;overflow:hidden, not word-wrap:break-word;word-break:break-all;

Word-wrap:break-word;overflow:auto, there is no problem in IE. Under FF, a long string is obscured by some content.

Also, the test code is as follows:

1.htm

<style>

. c1{width:300px; BORDER:1PX Solid Red}

. c2{Width:300px;word-wrap:break-word; BORDER:1PX Solid Yellow}

. c3{Width:300px;word-wrap:break-word;word-break:break-all; BORDER:1PX Solid Green}

. c4{Width:300px;word-wrap:break-word;word-break:keep-all; border:1px Solid Blue}

. c5{Width:300px;word-break:break-all; BORDER:1PX solid Black}

. c6{Width:300px;word-break:keep-all; BORDER:1PX Solid Red}

. c7{Width:300px;word-wrap:break-word;overflow:auto; BORDER:1PX Solid Yellow}

</style>

. c1{width:300px; BORDER:1PX Solid Red}

<div class= "C1" &GT;ASDASD

</div>

<div class= "C1" >

This is all 中文版. This is all 中文版. This is all 中文版.

</div>

<div class= "C1" >

It's all in Chinese. It's all in Chinese. It's all in Chinese.

</div>

<div class= "C1" >

In Chinese and English mixed row situation. Chinese and 中文版. In Chinese and English mixed row situation. Chinese and 中文版.

</div>

<br>

. c2{Width:300px;word-wrap:break-word; border:1px solid Yellow}

<div class= "C2" >

Safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

</div>

<div class= "C2" >

This is all 中文版. This is all 中文版. This is all 中文版.

</div>

<div class= "C2" >

It's all in Chinese. It's all in Chinese. It's all in Chinese.

</div>

<div class= "C2" >

In Chinese and English mixed row situation. Chinese and 中文版. In Chinese and English mixed row situation. Chinese and 中文版.

</div>

<br>

. c3{Width:300px;word-wrap:break-word;word-break:break-all; BORDER:1PX Solid Green}

<div class= "C3" >

Safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

</div>

<div class= "C3" >

This is all 中文版. This is all 中文版. This is all 中文版.

</div>

<div class= "C3" >

It's all in Chinese. It's all in Chinese. It's all in Chinese.

</div>

<div class= "C3" >

In Chinese and English mixed row situation. Chinese and 中文版. In Chinese and English mixed row situation. Chinese and 中文版.

</div>

<br>

. c4{Width:300px;word-wrap:break-word;word-break:keep-all; border:1px Solid Blue}

<div class= "C4" >

Safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

</div>

<div class= "C4" >

This is all 中文版. This is all 中文版. This is all 中文版.

</div>

<div class= "C4" >

It's all in Chinese. It's all in Chinese. It's all in Chinese.

</div>

<div class= "C4" >

In Chinese and English mixed row situation. Chinese and 中文版. In Chinese and English mixed row situation. Chinese and 中文版.

</div>

<br>

. c5{Width:300px;word-break:break-all; BORDER:1PX solid Black}

<div class= "C5" >

Safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

</div>

<div class= "C5" >

This is all 中文版. This is all 中文版. This is all 中文版.

</div>

<div class= "C5" >

It's all in Chinese. It's all in Chinese. It's all in Chinese.

</div>

<div class= "C5" >

In Chinese and English mixed row situation. Chinese and 中文版. In Chinese and English mixed row situation. Chinese and 中文版.

</div>

<br>

. c6{Width:300px;word-break:keep-all; BORDER:1PX Solid Red}

<div class= "C6" >

Safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

</div>

<div class= "C6" >

This is all 中文版. This is all 中文版. This is all 中文版.

</div>

<div class= "C6" >

It's all in Chinese. It's all in Chinese. It's all in Chinese.

</div>

<div class= "C6" >

In Chinese and English mixed row situation. Chinese and 中文版. In Chinese and English mixed row situation. Chinese and 中文版.

</div>

<br>

. c7{Width:300px;word-wrap:break-word;overflow:auto; BORDER:1PX Solid Yellow}

<div class= "C7" >

Safjaskflasjfklsajfklasjflksajflksjflkasjfksafj

</div>

<div class= "C7" >

This is all 中文版. This is all 中文版. This is all 中文版.

</div>

<div class= "C7" >

It's all in Chinese. It's all in Chinese. It's all in Chinese.

</div>

<div class= "C7" >

In Chinese and English mixed row situation. Chinese and 中文版. In Chinese and English mixed row situation. Chinese and 中文版.

</div>

The difference between Word-wrap:break-word and Word-break:break-all;