ウェブサイト制作で文字列がはみ出してしまうとき使えるCSS

ウェブサイトを作る時に文章が長かったりリンク貼っていると、設定したブロックからはみ出すことがあるとおもいます。

 

 

 

そんな時に自動で改行してくれるCSSを紹介したいと思います。

 

文字列や文章を入れて比較できるように画像を入れています。

下の画像はCSSが適用されなかったときの画像です。

 

 

「文字列」

https://ryohakosako.com/works/

 

「長い単語が含まれる文章」

This is a famous song, right? This is supercalifragilisticexpialidocious.

 

「日本語の文章」

ここは日本ですか?はい、そうです。

 

 

 

 

1. overflow-wrap: break-word;

はみだした長い文字列(リンクなど)や長い英単語などを自動で改行してくれます。

 

 

【overflow-wrap:】はテキストがボックスから溢れないようにする設定で使われます。

 

 

もともと【word-wrap:】という名前でしたが、【 overflow-wrap:】 に変更されされました。ブラウザによっては【word-wrap:】しか使えない場合もあるので両方記述しておくことをおススメします。

 

 

【overflow-wrap:】の設定は【break-word;】 の他にも、初期値の【normal;】と【anywhere;】がありますが、文字列と単語をボックスに合わせて改行してくれる【break-word;】か【anywhere;】を設定するのがおすすめです。

 

 

 

 

 

2. word-break: break-word;

こちらのCSSも、はみだした長い文字列(リンクなど)や長い英単語などを自動で改行してくれます。

 

 

【word-break:】もテキストがボックスから溢れないようにする設定で使われます。

【word-break: break-word;】にすると、【overflow-wrap: break-word;】と同じ表示になるのでどちらでも大丈夫です。

 

 

【overflow-wrap:】との違いがあるとすれば、短い単語でもボックスの範囲内であれば途中で改行できる【break-all;】があることです。

あと、【keep-all;】を設定すれば日本語の文章をブロックからはみ出させることが出来ます。

 

 

 

 

【overflow-wrap: break-word;】も【word-break: break-word;】もどちらも設定した範囲内から文字列がはみ出したときに使えるCSSなのでぜひ活用してみてください。