文字
overflow-wrap 長い単語を折り返す
意味
URLや長い英単語が、箱からはみ出すときに使います。overflow-wrap: anywhere は、入りきらない場所で折り返します。日本語の文章には、普段は不要なことが多いです。
break-word は、単語の途中では折らず、入りきらないときだけ折ります。メールアドレスやトークンを表示する場所から入れると安全です。
コード
HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。
<p>https://example.com/very/long/path/that/should/wrap</p>p {
max-width: 16rem;
overflow-wrap: anywhere;
}プレビュー
ブラウザ対応
| ブラウザ | 対応 |
|---|---|
| Chrome | 23〜 |
| Firefox | 49〜 |
| Safari | 7〜 |
| Edge | 18〜 |
| Chrome Android | 25〜 |
| Safari iOS | 7〜 |
出典: MDN Web Docs(`@mdn/browser-compat-data`)