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を組み合わせるのがおすすめです。
よくある質問（FAQ）
Q. CSSでテキストが改行されない原因は何ですか？
A. white-space: nowrap;が設定されている、またはoverflow: hiddenと組み合わせて文字が隠れているケースが多いです。white-spaceプロパティを確認してください。
Q. 長いURLやパスが改行されずはみ出す場合の対処法は？
A. word-break: break-all;またはoverflow-wrap: anywhere;を指定することで、長い文字列を途中で折り返せます。
Q. 日本語テキストが改行されない場合の対処法は？
A. 日本語は通常どこでも改行できますが、word-break: keep-all;が設定されていると単語の途中で改行されなくなります。設定を確認してください。
まとめ
テキストを改行させないには white-space: nowrap; を指定します。さらに text-overflow: ellipsis; を組み合わせれば、省略表示も可能です。ナビゲーションやボタン、ラベルなど、レイアウト上1行に収めたい場面で活用すると便利です。
