【CSS】文字列が要素をはみ出してしまう…改行位置を制御する
文字列が要素をはみ出てしまう理由
文字列が要素をはみ出る理由は、一文でまとめると
はみ出ている文字列を単語として、CSSが認識しているからになります。
どういうことなのか、具体的に解説すると…
例) 英語の「Butterfly」という単語
Butterflyという単語は、「Butter」と「fly」という二単語で成り立っているので、
この二単語の間で改行が行われた場合、別の単語として認識されてしまうかもしれない…
なのでCSSは、
デフォルトでは、要素を超えるような長い英語や数字などは改行は行わず、はみ出ていることを検知させてくれています。
解決案
ここまで、なぜ文字列が要素をはみ出してしまうのかについて解説しました。
下記のプロパティを使用することで、基本的には解決されるはずです。
①単語間では改行をせず、要素をはみ出すような文字列の場合のみ改行する
overflow-wrap: anywhere;
/* または */
overflow-wrap: break-word;
②単語間であっても改行し、要素をはみ出すような文字列も改行する
/* CJK(中国語、台湾語、日本語、韓国語)テキスト以外を改行したい場合(英語など) */
word-break: break-all;
/* CJKテキストのみ改行したい場合 */
line-break: anywhere;
文字のはみ出し、改行位置を制御するCSSプロパティ
ここからは、上記の解決案で使用した三つのプロパティの解説になります。
簡潔に解説しておりますので、詳しい仕様等は、各プロパティにMDNのリンクがありますので、そちらを参照ください。
word-break
テキストの改行規則を制御することができます。(要素内の文字間で改行するかどうか)
日本語や英語や中国語であったりの改行規則を制御するもので、記号などは通常の改行規則が適用されます。
word-break: normal;(初期値)
normalは、既定の改行規則が使用されます。
word-break: break-all;
break-allは、CJK(中国語、台湾語、日本語、韓国語)以外のテキストが、改行規則を無視して表示されます。つまり、CJK以外の英語などは、文字間であっても改行されるようになります。
word-break: keep-all;
keep-allは、CJKテキストの改行をさせず、それ以外のテキストは既定の改行規則と同じ挙動になります(normalと同じ挙動)。
line-break
CJK(中国語、台湾語、日本語、韓国語)のテキストの改行規則を指定できます。
line-break: auto;(初期値)
autoは、既定の改行規則が使用されます。
line-break: loose;(またはnormal、strict)
こちらの値は、loose < normal < strictの順で、改行規則を強めていくことができます。
実際にどんな規則が適用されるのか、参考にしていただけるWebサイトを紹介いたします。(MDNに具体的な規則が書かれていないため)
line-break: anywhere;
anywhereは、すべての改行規則を無視します。
なので、句読点であったり、「っ」のような小さい文字が行頭にくることも許容する形になります。
overflow-wrap(旧:word-wrap)
要素幅を超える時、文字列の途中で、改行を入れるかどうかを指定できます。
overflow-wrap: normal;(初期値)
二つの単語間の空白などでのみ改行をします。
なので、要素幅を超えた長い文字列の場合は、既定の改行規則通り、はみ出します。
overflow-wrap: anywhere;
要素幅をはみ出すことをさけるため、長い文字列の場合改行されるようになります。
(単語間では基本的に改行しません。)
overflow-wrap: break-word;
anywhereと同様、要素幅をはみ出すことをさけるため、長い文字列の場合改行されるようになります。
(単語間では基本的に改行しません。)
Tips オーバーフローとは
オーバーフローとは、
今回取り扱っている文字列が要素からはみ出すなどを含めた、要素のはみ出しのことです。
そもそも、なぜ要素ははみ出すように設計されているのか？
これは、開発者が意図しない表示を発生させないためになります。
詳しくはMDNを参照ください。
以上になります。それではまた！
Discussion