Rni-L Blog

Appearance

前言 ​

CJK: Chinese/Japanese/Korean 在进行文本换行时，需要确认你换行的文本属于哪种类型的文字，CJK / non-CJK

word-break ​

  1. normal
    1. 按照默认规则换行
    2. CJK 文本会正常换行
  2. break-all
    1. 对所有类型的文本，只要超出范围区域，就执行文本换行
  3. keep-all
    1. CJK 文本不会换行
  4. break-word（已废弃）
    1. 长单词会在下一行换行

overflow-wrap ​

  1. normal
    1. 默认行为，长单词不会换行
  2. break-word
    1. 原本的 word-break: break-word 效果；
  3. anywhere
    1. 和 break-all 一样

demo ​

html
 <style>
    * { margin: 0;padding: 0; }
    .wrap {
      /* width: 500px; */
      /* display: flex; */
    }
    .en1 { word-break: normal; }
    .en2 { word-break: break-all; }
    .en3 { word-break: keep-all; }
    .en4 { overflow-wrap: normal; }
    .en5 { overflow-wrap: break-word; }
    .en6 { overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="en1">word-break: normal walked three hours through mudddddddddddddmuddddddddsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsddddddsdf sdf</div>
    <div class="en2">word-break: break-all walked three hours through mudddddddddddddmuddddddddsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsddddddsdf sdf</div>
    <div class="en3">word-break: keep-all walked three hours through mudddddddddddddmuddddddddsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsddddddsdf sdf</div>
    <div class="en4">overflow-wrap: normal walked three hours through mudddddddddddddmuddddddddsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsddddddsdf sdf</div>
    <div class="en5">overflow-wrap: break-word walked three hours through mudddddddddddddmuddddddddsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsddddddsdf sdf</div>
    <div class="en6">overflow-wrap: anywhere walked three hours through mudddddddddddddmuddddddddsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsddddddsdf sdf</div>
  </div>

参考 ​

  1. mdn - word-break
  2. juejin