「CSS」overflow-wrapプロパティ値break-wordの使い方

2021年9月15日

構文
overflow-wrap は CSS のプロパティで、インライン要素に対して、テキストが行ボックスをあふれないように、
ブラウザーが不可分の文字列の途中で改行を入れるかどうかの設定を適用します。
break-word
行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、
単語分割によって導入された折り返し可能位置が考慮されません。
使用例

<style>
  .cft {
    overflow-wrap: break-word;
    border: 1px solid red;
    width: 100px;
    height: 30px;
    background: SkyBlue;
  }
</style>
<p class="cft">test123456abcdef</p>