シュウ

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

こんな方に読んでほしい

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

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

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

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

前回の記事

【CSS】white-spaceを解説！ スペース・タブ・改行の表示方法

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

overflow-wrapについて

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

/*--white-space--*/
要素 {overflow-wrap: 値;}

normalについて

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

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

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

p {
	width: 180px;
	background-color: #fd6158;
	
	/*--normalを指定--*/
	overflow-wrap:normal;
}

はみ出し部分について

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

ovreflowの記事

【CSS】overflowの使い方 hidden、scrollの指定方法など

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

break-wordについて

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

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

<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での改行も可能になりました。
ですが、ブラウザごとに対応が違うので、使用する際には両方のプロパティを指定しておきましょう。

まとめ

今回はこれで以上です。

最新記事

• 

  【CSS】display flex指定方法のまとめを解説

  2024.03.07

• 

  【CSS】背景画像を複数設置について解説!

  2023.12.14

• 

  【CSS】疑似クラス、::afterと::beforeで斜めの背景を解説!!

  2023.06.22

• 

  【CSS】画像の透過について、mix-blend-modeを使ってみよう

  2023.06.01

関連記事

< 前の記事

【CSS】white-spaceを解説！ スペース・タブ・改行の表示方法

次の記事 >

【CSS】contentを解説！ 擬似要素にコンテンツを挿入しよう！