文字の折り返し指定はoverflow-wrap: anywhereだけで良さそう

overflow-wrapやword-breakプロパティなどで折り返し指定をし、英文やURLが突き抜けないように対策しているのをよく見かけます。

しかし、overflow-wrap: anywhereが全ブラウザでサポートされるようになって、この指定だけでいい感じに折り返されるようになりました。

WordPressテーマ『SWELL』

17,600円（税込）

当ブログで使用中のテーマ「SWELL」。Webサイトのベースとしても多く利用されている投資価値No.1のテーマです。

レビュー記事はこちら購入はこちら

従来の組み合わせ

overflow-wrap: break-wordは自動で折り返しされますが、幅指定のないFlexboxなどでは、テキストがはみ出してしまいます。

body {
  overflow-wrap: break-word;
}

そのため、word-break: break-allと併用する必要がありました。

body {
  overflow-wrap: break-word;
  word-break: break-all;
}

しかし今度は、英文の単語が中途半端な箇所で折り返されてしまい、読みにくくなってしまいました。

word-break: break-wordを指定すれば単語ごとに折り返し指定することはできますが、こちらは非推奨となっているため実質使えません。

overflow-wrap: anywhereを指定

overflow-wrap: anywhereは単語ごとに区切って折り返しすることができ、Flexboxでも問題なく折り返しがされます。

body {
  overflow-wrap: anywhere;
}

overflow-wrap: anywhereは、Safari 15.4 (Released 2022-03-14)から使えるようになり、現在全てのブラウザでサポートされています。

特段理由がなければ、折り返しの指定はこれだけで良さそうです。

あわせて読みたい

【CSS】コーポレートサイトでよく見かけるスクロールテキストの実装 おしゃれなコーポレートサイトでよく見かける、横に流れる文字（スクロールテキスト）の実装方法をご紹介します。 HTMLもCSSも超簡単なので是非お試しください。 HTML H…

おすすめWEBスクール

WEB制作やWEBデザインを学びたいなら、SNSでも話題の「デイトラ」がおすすめ！
どのコースも10万円前後と業界最安値で、副業や転職に向けて十分なスキルを身につけることができます。

＼ クリックしてジャンプ！ ／