CSS word-wrap同word-break的区别

2020-05-08 08:48:30易采站长站整理

  </div>
  <div class=c4>
  中英文混排的情况。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>
  全是中文的情况。全是中文的情况。全是中文的情况。
  </div>
  <div class=c5>
  中英文混排的情况。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>
  全是中文的情况。全是中文的情况。全是中文的情况。
  </div>
  <div class=c6>
  中英文混排的情况。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>
  全是中文的情况。全是中文的情况。全是中文的情况。
  </div>
  <div class=c7>
  中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
  </div>