CSSでテキストを改行する方法をまとめ

はるか

HTMLで改行したいとき、普段は段落タグ<p>、改行タグ<br>を使うことが多いです。

<p>を使う改行例
コードは下記の通り。(Code-1-1)

<p>適度な緊張は、人の脳活性化させる力があります。</p>
<p>緊張した経験は、どんどん人に話そう。</p>
<p>笑いながら話すことで、心は軽くなり、メンタルも強くなる。</p>

ブラウザで確認すると、以下のようになります。

img-1-1

<br>を使う改行例
コードは下記の通り。(Code-2-1)

<p>
   適度な緊張は、人の脳活性化させる力があります。<br>
   緊張した経験は、どんどん人に話そう。<br>
   笑いながら話すことで、心は軽くなり、メンタルも強くなる。
</p>

ブラウザで確認すると、以下のようになります。

img-2-1

★改行タグ<br>を使う際に連続で<br>を使わないように気をつけてください。<br>を連続で使うと行間をたくさんあける構造になっちゃいます。

コードは下記の通り。(Code-3-1)

<p>
   適度な緊張は、人の脳活性化させる力があります。<br>
   <br>
   <br>
   <br>
   <br>
   緊張した経験は、どんどん人に話そう。<br>
   笑いながら話すことで、心は軽くなり、メンタルも強くなる。
</p>

ブラウザで確認すると、以下のようになります。

img-3-1

段落タグ<p>、改行タグ<br>を使わずにCSSのみでテキストの改行もできるので、本記事はCSSでテキストを改行する４つの方法を紹介します。
 
１、word-wrap属性
 
word-wrap：属性はブラウザが単語内で断文を許可するかどうかを示すのに使われます。これは文字列が長すぎてその自然断句点が見つからない時にオーバーフロー現象を防ぐためです。
以下の値で設定します。

word-wrap: normal | break-word;

normal：単語の途中で改行はしません。この場合、必要に応じて表示範囲を拡大します。
コードは下記の通り。(Code-4-1)

<p style="word-wrap: normal; background-color: papayawhip; width: 250px; ">
   適度な緊張は、人の脳活性化させる力があります。緊張した経験は、どんどん人に話そう。 笑いながら話すことで、心は軽くなり、メンタルも強くなる。
   Moderatetensionhasthepowertoactivate people's brains. Talk to people more and more about nervous experiences. Laughingandtalkingaboutitlightensyourheart and strengthens your mental health.
</p>

ブラウザで確認すると、以下のようになります。

img-4-1

break-word：必要に応じて単語の途中で改行します。
 
コードは下記の通り。(Code-5-1)

<p style="word-wrap: break-word; background-color: papayawhip; width: 250px; ">
   適度な緊張は、人の脳活性化させる力があります。緊張した経験は、どんどん人に話そう。 笑いながら話すことで、心は軽くなり、メンタルも強くなる。
   Moderatetensionhasthepowertoactivate people's brains. Talk to people more and more about nervous experiences. Laughingandtalkingaboutitlightensyourheart and strengthens your mental health.
</p>

ブラウザで確認すると、以下のようになります。

img-5-1

２、word-break 属性
 
word-break 属性は単語内の断句をどのように行うかを示すのに使われます。
以下の値で設定します。

word-break: normal | break-all | keep-all ;

normal：ブラウザのデフォルトの改行規則を使用する。

コードは下記の通り。(Code-6-1)

<p style="word-break:normal; background-color: pink; width: 50px; ">
   適度な緊張は、人の脳活性化させる力があります。Moderatetensionhasthepowertoactivate people's brains.
</p>

ブラウザで確認すると、以下のようになります。

img-6-1

break-all：単語内の改行を許可する。
 
コードは下記の通り。(Code-7-1)

<p style="word-break:break-all; background-color: pink; width: 50px; ">
   適度な緊張は、人の脳活性化させる力があります。Moderatetensionhasthepowertoactivate people's brains.
</p>

ブラウザで確認すると、以下のようになります。

img-7-1

keep-all：半角スペースやハイフンでしか改行できません。
 
コードは下記の通り。(Code-8-1)

<p style="word-break:keep-all; background-color: pink; width: 50px; ">
   適度な緊張は、人の脳活性化させる力があります。Moderatetensionhasthepowertoactivate people's brains.
</p>

ブラウザで確認すると、以下のようになります。

img-8-1

3、text-overflow属性
 
text-overflowは CSS のプロパティで、非表示のあふれた内容をどのようにユーザーに知らせるのかを設定します。切り取られるか、省略記号 ('…') を表示するか、独自の文字列を表示するかです。
以下の値で指定します。

text-overflow: clip| ellipsis ;

clip：省略記号 ('…') を表示しない。
 
コードは下記の通り。(Code-9-1)

<p style="text-overflow:clip; white-space: nowrap; overflow: hidden; background-color: pink; width: 550px; ">
   適度な緊張は、人の脳活性化させる力があります。Moderate tension has the power to activate people's brains.
</p>

ブラウザで確認すると、以下のようになります。

img-9-1

ellipsis：省略記号 ('…') を表示します、【overflow: hidden;】と共にとく使われます。
 
コードは下記の通り。(Code-10-1)

<p style="text-overflow:ellipsis; white-space: nowrap; overflow: hidden; background-color: pink; width: 550px; ">
   適度な緊張は、人の脳活性化させる力があります。Moderate tension has the power to activate people's brains.
</p>

ブラウザで確認すると、以下のようになります。

img-10-1

4、white-space属性

white-spaceとはソース中のテキストについて、自動改行するか複数の空白を一つの空白にするか、改行を空白にするかなど、改行やスペース、タブの扱いを指定するプロパティです。
以下の値で指定します。

white-space: normal| pre| nowrap ;

normal(初期値)：ソース中の連続する半角スペース、タブ、改行を一つの半角スペースにまとめ、自動的に折り返しをして表示します。
コードは下記の通り。(Code-11-1)

<p style="white-space:normal; background-color: yellowgreen; ">
   適度な緊張は、人の脳活性化させる力があります。Moderate tension has the power to activate people's brains.
</p>

ブラウザで確認すると、以下のようになります。

img-11-1

pre：ソース中の連続する半角スペース、タブ、改行をそのまま表示します。 自動的な折り返しは行いません。
コードは下記の通り。(Code-12-1)

<p style="white-space:pre; background-color: yellowgreen; ">
   適度な緊張は、人の脳活性化させる力があります。Moderate tension has the power to activate people's brains.
</p>

ブラウザで確認すると、以下のようになります。

img-12-1

nowrap：ソース中の連続する半角スペース、タブ、改行を一つの半角スペースにまとめて表示します。自動的な折り返しは行いません。
 
コードは下記の通り。(Code-13-1)

<p style="white-space:nowrap; background-color: yellowgreen; ">
   適度な緊張は、人の脳活性化させる力があります。Moderate tension has the power to activate people's brains.
</p>

ブラウザで確認すると、以下のようになります。

img-13-1

ここでCSSでテキストを改行する４つの方法をまとめました、ご参考になれば幸いです。



エンジニアファーストの会社
株式会社CRE-CO
嬋

いいなと思ったら応援しよう！