An analysis of WORD-BREAK|OVERFLOW-WRAP|WORD-WRAP--CSS English segmentation

---restore content starts---

An analysis of WORD-BREAK|OVERFLOW-WRAP|WORD-WRAP--CSS English segmentation

Today in learning overflow properties again, when viewing the effect, see the following results, content in the Div China, but the content of the two P element is not wrapped, search for a system to find the answer, to ask the big God in the group, only to know that the problem of English segmentation, but still do not understand. Not before this situation, in order to thoroughly understand, English segmentation, and began to learn English segmentation is what is going on.

Two line breaks

Every language has a line, in Chinese, we are the smallest language unit is a word, word composition words, words in line, will not affect the meaning of the word, the smallest language unit in English should be a word, and the word is composed of letters, the letter can be split, that is, can be wrapped in words, and split may affect the meaning of the word or Or a poor reading experience, this is the difference between the English word-wrap and the Chinese line. In order not to allow the reader to create ambiguity, the Chinese language in line with the Chinese writing type, at the end of the punctuation mark Line, that is, punctuation can not be at the beginning, words may be wrapped, punctuation is usually the Chinese sentence breakpoint.

For the Content-adaptive box, which is the width-determined box, there is no problem of line-wrapping causing ambiguity, such as floating boxes. For a fixed-width or adaptive container box, there is a problem of line-wrapping causing ambiguity.

①word-break:normal|keep-all|break-all| (The default is normal, there are two values, with very little, do not write)

MDN Interpretation and translation:

The word-break CSS property was used to specify whether to break lines within words. The Word-break property is used by the specifier to break lines within a word.

Applies to all elements

Inherited Yes

Normal:use The default line break rule.

Keep-all:don ' t allow word breaks to CJK text, NON-CJK text behavior is the same as for Nomal. Do not wrap in Chinese, Japanese, or Korean, non-CJK text is the same as normal.

Break-all:word breaks may is inserted between and chararcter for NON-CJK (Chinese/japanese/korean). You can wrap lines in non-CJK words.

Chinese line is the same as our writing rules, we mainly look at the book English and the number, the three differences. Consider a string of numbers as a whole, creating a non-existent word lon.....ng.

Instance

Html

 
 
 1     <div id="outbox">
 2         <div class="innerbox">
 3             <h6>word-break:normal</h6>
 4             <p class="p1 "> These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
 5         </div>
 6         <div class="innerbox">
 7             <h6>word-break:keep-all</h6>
 8             <p class="p2 ">These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
 9         </div>
10         <div class="innerbox">
11             <h6>word-break:break-all</h6>
12             <p class="p3 ">These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
13         </div>
14     </div>

Css:

Everyone shared the Outbox and all P elements:

 
1      #outbox {
2 width: 160px; / / the outer box specifies the width, and the inner box can adapt to the width of the outer box
3             border: 1px solid green;
4}
Five
6         p {
7             font-size: 16px;
8             border: 2px solid red;
9             padding: 5px;
10             background: #f29705;
11}

P1,P2, p3 style:

 1      .p1 {
 2             word-break: normal;
 3         }
 4         
 5         .p2 {
 6             word-break: keep-all;
 7         }
 8         
 9         .p3 {
10             word-break: break-all;
11         }
12         

：

Observing the individual attributes is worth showing, and you can see the various word-break of the difference.

word-break:normal--according to the General breakpoint segmentation, may overflow;

Word-break:break-all--content-edge division, words may be destroyed, will not overflow;

word-break:keep-all--breakpoint segmentation, may overflow, performance and word-break:normal the same.

②overflow-wrap:normal | Break-word

The interpretation of MDN and my translation:

The property wasoverflowused to specify whether or not the browser could break lines within words in order to PR -wrap    Event overflow when a otherwise unbreakable string is too long to fit in its containing box. The Overflow-wrap property is used to indicate whether a word is wrapped in words to prevent a word overflow when a non-truncated string is too long to be included in the box. That is, when the length of a word is wider than the box containing it, this property can be used to wrap the word in order to achieve a non-overflow effect.

Applies to all elements

Inherited Yes

Normal:indicates that lines could only be in the normal word break points. Declares that you can wrap only the breakpoint in a word.

Break-word:indicates that normally unbreakable words is broken at arbitrary points if there is no otherwise acceptab Le break points. Declares that if there is no breakpoint, the line can be wrapped at any point in the word. (not good to understand)

Example:

PA PB of HTML:

 
 2 <div id="outbox">
      <div class="point ">
 3               <h4>overflow-wrap:normal</h4>
 4               <p class="pa "> These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
 5          </div>
 6          <div class="point ">
 7              <h4>overflow-wrap:break-word</h4>
 8               <p class="pb ">These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
 9         </div>
10 </div> 

Css:

 
1         .pa {
2             overflow-wrap: normal;
3         }
4         
5         .pb {
6             overflow-wrap: break-word;
7         } 

Effect:

Adad

Observation, you can see the difference between the two:

overflow-wrap:normal--breakpoint Segmentation, the word is not destroyed, may overflow;

overflow-wrap:break-word--first breakpoint, the word too long and then at the end of the segmentation, the word may be destroyed, will not overflow.

③word-wrap:normal | Break-word

Description and translation of MDN:

Html:

 
1  <div id ="outbox"> 
 2     <div class="point ">
 3             <h4>word-wrap:normal</h4>
 4             <p class="pA "> These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
 5         </div>
 6         <div class="point ">
 7             <h4>word-wrap:break-word</h4>
 8             <p class="pB "> These some text. lonnnnnnnnnnnnnnnnnng The lines 1234567889123456789 will break at any character character.</p>
 9         </div>
10 </div>

PA PB for CSS:

 
 
1        .pA {
2             word-wrap: normal;
3         }
4         
5         .pB {
6             word-wrap: break-word;
7         } 

：

Observation, you can see the difference between the two:

Word-wrap rules How to make a segmentation,

word-wrap:normal--is only breakpoint segmentation, the word too long may overflow;

word-wrap:break-word--First breakpoint segmentation, the word is too long, a line can not be put, and then at any end of the sentence, the word may be destroyed, will not overflow.

---restore content ends---

An analysis of WORD-BREAK|OVERFLOW-WRAP|WORD-WRAP--CSS English segmentation