SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.06.24
  • CATEGORY
TITLE

【CSS】overflow-wrapを解説! 単語の途中での改行を指定する!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【CSS】overflow-wrapを解説! 単語の途中での改行を指定する
についての解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • overflow-wrap(オーバーフロー・ラップ)の使い方について学びたい方へ
  • break-wordを使い方を学ぼう!

今回は、overflow-wrapについての記事を書きました。
overflow-wrapプロパティとは、単語の途中での改行を指定するプロパティになります。

前回は、white-spaceについての記事を書きました。
white-spaceプロパティとは、要素内の半角スペース、タブ(tab)、改行をどのように表示するかを
指定するプロパティになります。

「overflow-wrap」 「white-space」は改行についてのプロパティになります。
ここではoverflow-wrapにポイントをおき解説していきます。

前回の記事

white-spaceの基本的な使い方についての記事になります。

overflow-wrapについて

overflow-wrapについて

overflow-wrapプロパティとは、要素幅に合わせて単語の途中で改行をどうするのかを指定します。
例えば、URLや日本語サイトの翻訳、英文など要素幅からはみ出た際に指定します。
書き方は以下のようになります。

/*--white-space--*/
要素 {overflow-wrap: 値;}
指定できる値
  • normal(初期値)
    単語が要素幅を超える場合は、改行せずに表示します
  • break-word
    単語が要素幅を超える場合は、単語の途中でも改行し表示します

normalについて

normalについて

overflow-wrap:normalとは、
単語が要素幅を超える場合は、改行せずに表示します

日本語は、値がnormalでも要素幅で自動的に改行されます。
英数字は、値がnormalでも要素幅で自動的に改行されません、brを使わない限り、改行されません。

normalについて

abcdefghijklmnopqrstuvwxyz

私も、配色で悩んだ経験はたくさんあります。

<p>abcdefghijklmnopqrstuvwxyz</p>
<p>私も、配色で悩んだ経験はたくさんあります。</p>
p {
	width: 180px;
	background-color: #fd6158;
	
	/*--normalを指定--*/
	overflow-wrap:normal;
}

はみ出し部分について

はみ出し部分はovreflowプロパティを指定する事で、はみ出した部分を非表示、スクロールの指定が
可能になります。

ovreflowの記事

overflow:hidden、scrollの違い、使い方についての記事になります。

break-wordについて

break-wordについて

overflow-wrap:break-wordとは、
単語が要素幅を超える場合は、単語の途中でも改行し表示します

日本語は、値がnormal、break-wordでも要素幅で自動的に改行されます。
英数字は、値がbreak-wordを指定すると要素幅で自動的に改行されます。

break-wordについて

abcdefghijklmnopqrstuvwxyz

私も、配色で悩んだ経験はたくさんあります。

<p>abcdefghijklmnopqrstuvwxyz</p>
<p>私も、配色で悩んだ経験はたくさんあります。</p>
p {
	width: 180px;
	background-color: #fd6158;
	
	/*--break-wordを指定--*/
	overflow-wrap:break-word;
	
	/*--word-wrapを一緒に指定しておきましょう--*/
	word-wrap:break-word;
}

POINT!
word-wrapを指定する理由
以前はword-wrapで改行の指定をしていましたが、CSS3の導入によりoverflow-wrapでの改行も可能になりました。
ですが、ブラウザごとに対応が違うので、使用する際には両方のプロパティを指定しておきましょう。

まとめ

今回はこれで以上です。

POINT
  • overflow-wrapとは、単語の途中での改行を指定するプロパティになります。
  • はみ出した部分はovreflowを指定しましょう
  • overflow-wrapword-wrap両方のプロパティを指定しておきましょう。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top