【CSS】テキストを改行させない方法

Web ページのデザインによっては、見出しやボタンなどのテキストを1行に収めて表示したいケースがあります。CSS では white-space プロパティを使うことで、テキストが自動で折り返されないように制御できます。本記事では、改行をさせない基本的な方法と注意点を解説します。

基本：white-space: nowrap;

テキストを折り返さず、1行で表示するには以下のように指定します。

.no-wrap {
  white-space: nowrap;
}

<p class="no-wrap">
  このテキストは横幅が狭くても自動で改行されず、横スクロールになります。
</p>

応用：省略記号（…）を付ける

横幅を超えるテキストを「…」で省略表示したい場合は、overflow と text-overflow を組み合わせます。

.ellipsis {
  white-space: nowrap;       /* 改行させない */
  overflow: hidden;          /* はみ出した部分を非表示 */
  text-overflow: ellipsis;   /* 省略記号を表示 */
}

<div class="ellipsis">
  横幅を超えた部分は「…」で省略されます
</div>

リンクやボタンで使う場合

ボタン内のラベルやナビゲーションの項目で、改行させたくないときに有効です。

.btn {
  display: inline-block;
  padding: 8px 16px;
  white-space: nowrap;
}

注意点

• white-space: nowrap; は横幅が狭い場合でも改行されないため、デザインが崩れることがあります。
• レスポンシブデザインでは、テキストが収まらないと横スクロールが発生する場合があるので、ellipsis を組み合わせるのがおすすめです。

まとめ

テキストを改行させないには white-space: nowrap; を指定します。さらに text-overflow: ellipsis; を組み合わせれば、省略表示も可能です。ナビゲーションやボタン、ラベルなど、レイアウト上1行に収めたい場面で活用すると便利です。