The difference between word-wrap and word-break

Author：Eve Cole Update Time：2009-05-31 00:37:30

This article lists the recommended CSS styles for line breaks that are compatible with IE and FF, and details the differences between word-wrap and word-break.

Line break CSS recommended style compatible with IE and FF

The best way is

word-wrap:break-word; overflow:hidden;

instead of

word-wrap:break-word; word-break:break-all;

Neither

word-wrap:break-word; overflow:auto;

There is no problem under IE, but under FF, long English strings will be blocked beyond content.

The difference between word-wrap and word-break

The following is the quoted content:

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 only work for 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 is 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 way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean.

The summary is as follows:

word-wrap controls line wrapping.

When using break-word, line breaks will be forced. There is no problem with Chinese, and there is no problem with English sentences. But for long strings of English, it doesn't work.

break-word controls whether to break words.

Normal is the default situation, and English words are not split.

break-all is a break word. When a word reaches a boundary, the next letter automatically goes to the next line. Mainly solves the problem of long English strings.

keep-all refers to Chinese, Japanese, and Korean continuous words. That is to say, if you only use this time without word-wrap, the Chinese will not wrap. (English sentences are normal.)

ie under:

Using word-wrap:break-word; all works fine.

ff next:

If you don't use these two, there won't be any problems with Chinese. There will be no problem with English sentences either. However, long strings in English can cause problems.

In order to solve long strings of English, word-wrap:break-word;word-break:break-all; is generally used. However, this method will cause the words in ordinary English sentences to be disconnected (the same is true for ie).

The main problem currently exists in long strings of English and English words being disconnected. In fact, a long string in English is just a relatively long word.

That is, should English words be disconnected? The problem is obvious and it obviously shouldn't be disconnected.

For long strings in English, it is malicious, so of course there is no need to worry about it. However, we must also think of some ways to prevent it from expanding the container.

Use: overflow:auto; under ie, long strings will automatically wrap. ff, long strings will be covered.

So, to sum up, the best way is word-wrap:break-word;overflow:hidden; rather than word-wrap:break-word;word-break:break-all;.

word-wrap:break-word;overflow:auto; There is no problem under IE. Under ff, long strings will be partially obscured.

In addition, the test code is as follows:

The following is the quoted content:

1.htm================================================ ====================

solid yellow}
</style>

.c1{ width:300px; border:1px solid red}
<div class="c1">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c1>
This is all English. This is all English. This is all English.
</div>
<div class=c1>
All in Chinese. All in Chinese. All in Chinese.
</div>
<div class=c1>
Mixed arrangement of Chinese and English. Chinese and English. Mixed arrangement of Chinese and English. Chinese and English.
</div>

<br>
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
<div class="c2">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c2>
This is all English. This is all English. This is all English.
</div>
<div class=c2>
All in Chinese. All in Chinese. All in Chinese.
</div>
<div class=c2>
Mixed arrangement of Chinese and English. Chinese and English. Mixed arrangement of Chinese and English. Chinese and English.
</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 English. This is all English. This is all English.
</div>
<div class=c3>
All in Chinese. All in Chinese. All in Chinese.
</div>
<div class=c3>
Mixed arrangement of Chinese and English. Chinese and English. Mixed arrangement of Chinese and English. Chinese and English.
</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 English. This is all English. This is all English.
</div>
<div class=c4>
All in Chinese. All in Chinese. All in Chinese.
</div>
<div class=c4>
Mixed arrangement of Chinese and English. Chinese and English. Mixed arrangement of Chinese and English. Chinese and English.
</div>

<br>
.c5{ width:300px;word-break:break-all; border:1px solid black}
<div class="c5">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c5>
This is all English. This is all English. This is all English.
</div>
<div class=c5>
All in Chinese. All in Chinese. All in Chinese.
</div>
<div class=c5>
Mixed arrangement of Chinese and English. Chinese and English. Mixed arrangement of Chinese and English. Chinese and English.
</div>

<br>
.c6{ width:300px;word-break:keep-all; border:1px solid red}
<div class="c6">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class=c6>
This is all English. This is all English. This is all English.
</div>
<div class=c6>
All in Chinese. All in Chinese. All in Chinese.
</div>
<div class=c6>
Mixed arrangement of Chinese and English. Chinese and English. Mixed arrangement of Chinese and English. Chinese and English.
</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 English. This is all English. This is all English.
</div>
<div class=c7>
All in Chinese. All in Chinese. All in Chinese.
</div>
<div class=c7>
Mixed arrangement of Chinese and English. Chinese and English. Mixed arrangement of Chinese and English. Chinese and English.
</div>