HTML+CSSでボックス内の文字を改行・折り返して表示させる時

  • このエントリーをはてなブックマークに追加

東アジア圏の日本などの国からすると改行なんて単語の途中で折れても大した問題ではないが、海外だと読みづらいのか、ちょうどいいところで改行できないことがある。

ボックス内で文字が折り返さずに表示されるとデフォルトのvisibility:visible;のせいで、文字がボックスの領域からはみ出して表示されてしまうケースがある。改行を禁止していたり、改行の判断が難しい際に起きるみたい。

強制的にすべて改行・折り返す

これで折り返して表示されるようになる。英語の単語の途中でも折り返して表示されるところは注意が必要。

.sample {
word-break: break-all;
}

折返しをすべて改行・禁止する

1行ずーっと、改行されずに表示される。

.sample {
word-break: keep-all;
}

単語の途中で折返し・改行

適切なところで改行できない場合は、強制的に単語の途中で改行してしまう。

.sample {
word-break: break-word;
}