テキスト
overflow-wrap
overflow-wrap は、そのままでは枠からはみ出す長い単語や URL を、途中で折り返してよいかを指定します。
構文
normal | break-word | anywhereプレビュー
Open https://example.com/a/very/long/path to see more. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
overflow-wrap: anywhere;
}コントロール
overflow-wrapanywhere
Open https://example.com/a/very/long/path to see more. 素早い茶色の狐がのろまな犬を飛び越える。
解説
値の書き方
normal：ふつうの折り返し位置でしか折り返しません。長い URL は枠からはみ出します。初期値です。anywhere：ほかに折り返せる位置が無いときだけ、単語の途中で折り返します。break-word：折り返し方はanywhereと同じです。違いは次の「最小の幅」だけです。
anywhere と break-word の違い
anywhere は、単語の途中で切れることを要素の最小の幅の計算にも入れます。break-word は入れないので、長い URL があると要素はその長さより縮みません。 flex のアイテムや表のセル、width: min-content の要素で違いが出ます。このページのプレビューは幅が決まっているので、見た目は同じです。
気をつけること
- 古い名前の
word-wrapも、同じ意味のまま使えます。 - 途中で折り返すのは、はみ出す単語だけです。すべての単語を途中で切りたいときは
word-break: break-allを使います。