• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン
2019/09/26
書いた人:
rurippa!
カテゴリ:
CSS
346 views

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

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

目次

はじめに

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

gbhlaeuhgfak/aoerwgjkakmgrolwkrgaoajr,glajdungrklalj

word-break : break-allについて

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

サンプル

gbhlaeuhgfak/aoerwgjkakmgrolwkrgaoajr,glajdungrklalj

		<p>gbhlaeuhgfak/aoerwgjkakmgrolwkrgaoajr,glajdungrklalj</p>
		
		p {
			word-break : break-all;
		}
		

overflow-wrap: break-word;について

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

サンプル

	<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.

まとめ

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

参考サイト


この記事を読んだ人はこんな記事も読んでいます