web関連

【css】文字を改行させる「word-wrap」と「overflow-wrap」について

2019/01/09

2019/01/08

【css】文字を改行させる「word-wrap」と「overflow-wrap」について

urlとかの(英語)文字が要素をはみ出すときに「word-wrap: break-word;」を使って改行していたけど「overflow-wrap: break-word;」も同じような効果らしくてどっちを使えばいいのかわからなかった時の備忘録

「word-wrap」と「overflow-wrap」どっち使えばいい?

IE11で「overflow-wrap」が使えなかったので一応以下のように設定しておくとよさげ

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

そもそも「overflow-wrap」は「word-wrap」が改名したものらしい

どっちも囲ってる要素をはみ出しそうなら単語の途中に改行を入れるらしい
ただ、改行をする際の条件がちょい違うみたい

▼word-break
テキストが囲っている要素がはみ出したところで改行する

▼overflow-wrap
テキストが囲っている要素に入りきらないところで改行する

ちょっとよくわからず試してみたけど
差があったのが「japan-tokyo」のようなハイフンでつなげた単語の時だった

// 「word-wrap: break-word;」を使ったとき
○○ ×× japan-
tokyo

// 「overflow-wrap: break-word;」を使ったとき
○○ ×× 
japan-tokyo

「word-wrap: break-word;」はハイフンつなぎの単語はハイフンのところで改行してたけど「overflow-wrap: break-word;」はハイフンつなぎも単語として認識していた

ぶっちゃけこのくらいの差しかわからんかった(ちなみにchrome)

まとめ

とりあえず単語の途中で改行させたくないなら「overflow-wrap: break-word;」をとりあえず使っておけばよさげだから

word-wrap : break-word;
overflow-wrap : break-word;

と僕はこの順番で指定してる

 

比べるなら「word-break: break-all;」と「overflow-wrap: break-word;」の方がわかりやすかった
「word-break: break-all;」は単語の途中だろうが問答無用で改行するから使うとき注意