spanタグで文字がはみ出たときの対処法

2022年4月12日

今回はHTMLを使っていてspanタグで囲った要素の文字がはみ出たときの対処法についてご紹介いたします。

spanタグで文字がはみ出たときの対処法

結論を言うと、spanタグに下記のCSSを追加してみてください。

上記のCSSは、与えられた要素がはみ出したときに、自動的に改行を入れて折り返してくれるCSSです。

他にも、

などの方法があります。

ここでは詳しく説明しませんが、
break-all
は強制的に折り返し位置が来たら折り返す、
break-word
は単語の切れ目を可能な限り探して折り返す
というCSSになります。

上記で、表題のspanタグで文字がはみ出すという問題は解決するはずです。

これで解決しなかった場合は、要素の範囲を見誤っているかもしれません。

終わりに

今回はHTMLを使っていてspanタグで囲った要素の文字がはみ出たときの対処法についてご紹介いたしました。