The article listed the line feed CSS of compatible IE and FF to recommend a style, introduced Word-wrap to be the same as the distinction of Word-break in detail.
The line feed CSS of compatible IE and FF recommends a style
Best means is
Word-wrap:bReak-word; Overflow:hIdden;
is not
Word-wrap:bReak-word; Word-break:bReak-all;
Also not be
Word-wrap:bReak-word; Overflow:aUto;
Any problems are done not have below IE, below FF, grow the content that strings together English to be able to be obscured exceed.
Word-wrap is the same as the distinction of Word-break
| It is quotative content below:
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. Can spark when necessary Word-break.
Word-break: Normal Default. Allows Line Breaking Within Words. Seeming is only right Asian Text is effective. 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.
|
Summary is as follows:
Word-wrap controls line feed.
When use Break-word, it is will compulsive line feed. Chinese does not have any problems, english statement also is no problem. But the English that strings together to growing, not effective.
Whether does control break a word Break-word.
Normal is acquiescent circumstance, english word is not ravelled.
Break-all, it is to disconnect word. Arrive in the word when border, issue a letter to go to below one automatically. Basically solved the problem that grows string of English.
Keep-all, it is to point to Chinese, japanese, and Korean ceaseless word. Use only namely right now, need not Word-wrap, chinese won’t line feed. (English statement is normal. )
Below Ie:
Use Word-wrap:bReak-word; all normal.
Below Ff:
Be like these 2 unused word, chinese won’t give any issues. English statement also won’t give an issue. But, grow string of English to be able to give an issue.
Grow string of English definitely for solution, use Word-wrap:b commonlyReak-word;word-break:bReak-all; . But, this means can be brought about, the word in common English statement can be disconnected (also be below Ie) .
At present main problem consist in grows string of English and English word to be disconnected. Growing string of English actually is a longer word just.
Namely English word answer to should be not disconnected that? That problem is apparent, should be not disconnected apparently.
String together English to growing, it is baleful thing, nature need not was in charge of. But, also want some of method, do not let it open vessel big.
With: Overflow:aBelow Uto; Ie, grow string of meeting to be folded automatically row. Below Ff, grow string of meeting by cover.
So, on put together, best means is Word-wrap:bReak-word;overflow:hIdden; is not Word-wrap:bReak-word;word-break:bReak-all; .
Word-wrap:bReak-word;overflow:aUto; does not have any problems below Ie. Below Ff, grow string of meeting to be obscured ministry one’s duty is allowed.
Additional, test code is as follows:
| It is quotative content below:
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" >Safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div Class=c1>
This Is All English. This Is All English. This Is All English.
</div>
<div Class=c1>
It is the circumstance of Chinese completely. It is the circumstance of Chinese completely. It is the circumstance of Chinese completely.
</div>
<div Class=c1>
Chinese and English the condition that confuses a platoon. Chinese And English. Chinese and English the condition that confuses a platoon. 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>
It is the circumstance of Chinese completely. It is the circumstance of Chinese completely. It is the circumstance of Chinese completely.
</div>
<div Class=c2>
Chinese and English the condition that confuses a platoon. Chinese And English. Chinese and English the condition that confuses a platoon. 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>
It is the circumstance of Chinese completely. It is the circumstance of Chinese completely. It is the circumstance of Chinese completely.
</div>
<div Class=c3>
Chinese and English the condition that confuses a platoon. Chinese And English. Chinese and English the condition that confuses a platoon. 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>
It is the circumstance of Chinese completely. It is the circumstance of Chinese completely. It is the circumstance of Chinese completely.
</div>
<div Class=c4>
Chinese and English the condition that confuses a platoon. Chinese And English. Chinese and English the condition that confuses a platoon. 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>
It is the circumstance of Chinese completely. It is the circumstance of Chinese completely. It is the circumstance of Chinese completely.
</div>
<div Class=c5>
Chinese and English the condition that confuses a platoon. Chinese And English. Chinese and English the condition that confuses a platoon. 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>
It is the circumstance of Chinese completely. It is the circumstance of Chinese completely. It is the circumstance of Chinese completely.
</div>
<div Class=c6>
Chinese and English the condition that confuses a platoon. Chinese And English. Chinese and English the condition that confuses a platoon. 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>
It is the circumstance of Chinese completely. It is the circumstance of Chinese completely. It is the circumstance of Chinese completely.
</div>
<div Class=c7>
Chinese and English the condition that confuses a platoon. Chinese And English. Chinese and English the condition that confuses a platoon. Chinese And English.
</div>
|
