CSSでテキストを改行する方法・改行しない方法

CSSを使用してテキストを改行する方法と改行しない方法について解説します。

テキストの改行方法

改行を許可する方法

改行を許可するには、white-space プロパティを使用します。このプロパティを pre または pre-line に設定すると、HTML内の改行がそのまま反映されます。

.example {
  white-space: pre;
}

 

または、

.example {
  white-space: pre-line;
}

 

改行を許可しない方法

改行を許可しない場合は、white-space プロパティを nowrap に設定します。この場合、テキストは横に連続して表示されます。

.example {
  white-space: nowrap;
}

 

テキストの折り返し方法

テキストの折り返しには、overflow-wrap または word-wrap プロパティを使用します。

overflow-wrap プロパティを使用する方法

overflow-wrap プロパティを break-word に設定することで、長い単語を必要な箇所で折り返すことができます。

.example {
  overflow-wrap: break-word;
}

 

word-wrap プロパティを使用する方法

word-wrap プロパティを break-word に設定すると、テキストがコンテナからはみ出さないように折り返されます。

.example {
  word-wrap: break-word;
}

 

まとめ

CSSを使用してテキストの改行と折り返しを設定する方法を解説しました。white-space プロパティを調整することで、テキストの改行を制御できます。また、overflow-wrap または word-wrap プロパティを使用してテキストの折り返しを調整できます。

テキストの見た目を重要視する場合やレイアウトを調整する場合に、これらのCSSプロパティを活用してみてください。

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ

2023年版 Webコーディングにオススメの学習本【HTML/CSS/JavaScript】この記事では、初心者から中級者以上まで、Webコーディングの学習にオススメの学習本をご紹介します。この記事で紹介する本は、分かりやすい解説や実践的な例題、デザインや解説図など、学習をサポートするいろんな要素が含まれている本を選びました。ぜひ、自分に合った本を見つけて、ウェブ制作のスキルを磨いてみてください。...