テキストの折り返しの設定について

2019/09/26

枠からテキストがはみ出ないように、折り返しの方法を紹介します。

はじめに

下記のように、枠から文字が出てしまっていませんか？
今回は、それらを防ぐための方法を紹介します。

gbhlaeuhgfak/aoerwgjkakmgrolwkrgaoajr,glajdungrklalj

折り返したい部分に「word-break : break-all;」を追記するだけで、例え単語の途中や、意図しない部分でも折り返します。

gbhlaeuhgfak/aoerwgjkakmgrolwkrgaoajr,glajdungrklalj

		<p>gbhlaeuhgfak/aoerwgjkakmgrolwkrgaoajr,glajdungrklalj</p>

		p {
			word-break : break-all;
		}

先ほどと違い、こちらは英単語の途中では折り返しません。ですが、どうしても改行できる場所がない場合は、単語の途中でも改行されるため、使い勝手が良いと思います。

	<p>gbhlaeuhgfak/aoerwgjkakmgrolwkrgaoajr,glajdungrklalj</p>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>

	p {
		overflow-wrap: break-word;
	}

gbhlaeuhgfak/aoerwgjkakmgrolwkrgaoajr,glajdungrklalj

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

いかがでしたか？
細かいけどとても大事な内容だと思いますので、気をつけていきたいですね(^^)