テキストの折り返し・wbr・auto-phrase

どうも、くまだです。

テキストの折り返しに使うタグでbrタグがありますが、wbr・auto-phraseといったものでもテキストの折り返しができます。

wbrタグ

brタグは強制的に改行指定ですが、wbrタグは「Word Break」の略で「改行してもよい」箇所を指定するものです。

使い方はbrタグと同じように、折り返したい箇所にwbrタグを挿入して使います。

<p>サンプルサンプルサンプルサンプルサンプルサンプルここで<wbr>折り返し折り返し折り返し</p>

p {
  font-size: 24px;

  /* 長い単語でも折り返しにする */
  overflow-wrap: anywhere;

  /*テキストでの折り返しを無効 */
  word-break:  keep-all;
}

See the Pen wbrタグ by kuma0605 (@kuma0605) on CodePen.

wbrタグを使用する場合は、CSSにword-break:keep-all;を指定します。

画面幅に応じて、文章が幅内に収まるなら折り返さず表示され、画面幅が狭いときは、wbrタグで挿入した箇所以降の文章が折り返されます。

wbrタグはIEを除くブラウザで使用できます。

auto-phrase（オートフレーズ）はCSSのword-breakプロパティの一つです。ブラウザが自動的に文節の適切な位置で折り返ししてくれます。

  <p>サンプルサンプルサンプルサンプルサンプルサンプルここで折り返し折り返し折り返し</p>

p {
  font-size: 24px;
  overflow-wrap: anywhere;
  word-break: auto-phrase;
}

HTMLにlang=”ja”属性を指定する必要があります。

auto-phraseは今のところ、ChromeとEdgeのみ使用できます。

ここまで読んでくださりありがとうございました。