CSS

「white-space: nowrap」「display: inline-block」を使って、テキストを折り返さない方法

Webデザインにおいて、テキストが要素内で折り返されることを防ぎたい場合があります。例えば、ボタンやナビゲーションメニューのテキストなど、改行せずに1行で表示させたいときに役立ちます。今回は、

#1. white-space: nowrap の使い方

CSSの white-space プロパティは、テキストの空白や改行の挙動を制御するために使用されます。white-space: nowrap を指定すると、テキストは折り返しをせず、1行のままで表示されます。

1.1 white-space: nowrap の効果

  • 改行を防ぐ: HTML内で改行があっても、それが無視されてテキストは1行に収まります。
  • 空白の連続も1つに: 連続する空白文字が1つにまとめられます。

#2. display: inline-block の使い方

display: inline-block は、要素を「インライン要素」として扱いつつ、ブロック要素のように扱える特性を持ちます。このスタイルを使うことで、要素内のテキストが折り返されずに1行で収まり、さらに要素として幅や高さを設定できるようになります。

2.1 display: inline-block の効果

  • ブロック要素のように幅や高さを設定できる: 通常のインライン要素には設定できない width や height を設定できます。
  • インラインの特性を持つ: ブロック要素と異なり、横に並べることができます。

#3. 実際のコード例

この2つのプロパティを組み合わせて、テキストを折り返さないようにする例を紹介します。

3.1 HTML

<div class="nowrap-text">This is a long text that will not break into a new line and will be displayed in a single line.</div>

3.2 CSS

.nowrap-text {
  white-space: nowrap; /* テキストの折り返しを防止 */
  display: inline-block; /* インラインブロックにして幅や高さを設定できるようにする */
  width: 300px; /* 幅を設定してみる */
  background-color: #f0f0f0; /* 背景色を設定 */
  padding: 10px; /* パディングを追加 */
  border: 1px solid #ccc; /* ボーダーを追加 */
}

#4. 解説

  • white-space: nowrap; を指定することで、<div> 内のテキストは折り返されず、1行で表示されます。
  • display: inline-block; にすることで、<div>要素をインライン要素のように配置しつつ、width や height を指定してブロック要素としての特性も活用できます。
  • 幅 (width) を設定することで、テキストが指定した幅を超えることなく、1行で表示されます。もしテキストがその幅を超えた場合、要素内での折り返しは防げますが、テキストがはみ出すことになります。

#5. オーバーフローの制御

テキストが要素の幅を超えてはみ出すのを防ぎたい場合、overflow プロパティを使って、はみ出した部分を隠すことができます。

5.1 overflow: hidden を使う

.nowrap-text {
  white-space: nowrap;
  display: inline-block;
  width: 300px;
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
  overflow: hidden; /* はみ出た部分を隠す */
}

この場合、テキストが要素の幅を超えた場合でも、その超過部分は表示されなくなります。

5.2 text-overflow: ellipsis を使う

テキストが要素内で収まりきらない場合に、末尾に「...」を表示したい場合、text-overflow: ellipsis を使用します。これには、overflow: hidden と white-space: nowrap も必要です。

.nowrap-text {
  white-space: nowrap;
  display: inline-block;
  width: 300px;
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
  overflow: hidden;
  text-overflow: ellipsis; /* 文字がはみ出した場合に「...」を表示 */
}

#6. まとめ

  • white-space: nowrap は、テキストを折り返さないようにするために使用します。
  • display: inline-block は、インラインで配置しつつ、要素としての幅や高さを設定できるため、レイアウトを調整したい場合に便利です。
  • テキストがはみ出しても問題ない場合は、単純に white-space: nowrap を使いますが、テキストが長すぎてはみ出す場合には overflow や text-overflow を組み合わせることで、表示を制御できます。

タグ一覧