Css word-break and word-wrap

I suddenly realized that I had been writing pages in my previous way of thinking, and I did not notice many details. Although it is truncated, the details still exist. For example, a word is also truncated when it is not required to be truncated, so it is miserable.

Normally, an English word may not be very long. Generally, when testing a page, the tester uses a long, long, single-byte continuous character, this problem occurs. In this caseWord-break: break-all;ChangeWord-break: keep-all;The situation will change again, as shown in the figure:

The word can be normally displayed, and a long character will be forcibly wrapped. The above two screenshots are fromChrome 20170.1132.57 mIf the version of the browser is viewed in FF and IE, the magic of IE has another problem. In Chinese characters, the punctuation marks are used as the benchmark to force line breaks, if there are no punctuation marks, everything is normal, as shown in the figure:

At this time, I was confused. Which one should I use? Normally, we certainly hope that words can be wrapped normally rather than forced to be broken. If so, we should useWord-break: keep-all;AndWord-wrap: break-word;But in this case, the line feed of IE browser is too terrible and tangled.

After thinking about it, it's still because the text can be normally truncated, or the Internet Explorer is abandoned.Word-wrap: break-word;UseWord-wrap: break-word;In this case, each browser supports forced line breaks. If a space or punctuation character is used, the line breaks, and everything is perfect. (^. ^) Y -~~

The following is the HTML code structure I used during the test.

<Div class = "word_break"> text: Text. Here it is actually text. If you want more text, copy it ...... Text: Text. Here it is actually text. If you want more text, copy it ...... Text: Text. Here it is actually text. If you want more text, copy it ...... What will happen if the text content here is long and long without punctuation marks. End! </Div>

The code is as follows:	Copy code
<Div class = "word_break"> test text txt word copy now! Test texttexttexttexttext txt word copy now! Test text txt word copy now! Test text txt word copy now! Test text txt word copy now! Test text txt word copy now! Test text txt word copy now! </Div> <Div class = "word_break"> assssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss3333333

The code is as follows:	Copy code
412341234adsfadfzxcvzcvdfgfnasdfadzvasdf234234adfvczx

The code is as follows:	Copy code
Cvasdfasdf234adfzszxcvasdfasdf234234234azcvasdfad

The code is as follows:	Copy code
Fasdf234adfasdf </div>

 

Then this is the CSS code. This part of the code is combined with word-break and word-wrap in various browsers and click the blue text.

 

This code

The code is as follows:	Copy code
. Word_break {float: left; width: 200px; margin: 10px; padding: 10px; font-size: 16px; font-family: simsun; border: 1px solid #242424; zoom: 1 ;}