改行させないCSSの設定

Webデザインやコーディングにおいて、テキストを改行させない場面は、メニューバーの項目や表のセル内でレイアウトを整える文脈で頻繁に発生します。テキストの折り返しを防ぐ手段でよく使われるのが「CSSのプロパティ設定」で、意図しないデザイン崩れや不自然な単語の分割を簡単に回避できます。

この記事では、CSSを使ってテキストを改行させない基本的な方法から、はみ出したテキストの処理やFlexbox環境下でのレイアウト調整までを解説する内容です。実務で直面しやすいトラブルへの対策も、サンプルコード付きで解説していきますので、ぜひ参考にしてください。

テキストを自動で改行させないためには、状況に応じてCSSのプロパティを適切に使い分けることが基本的な考え方です。

このセクションで解説する主な手法は、以下の通りです。

• white-spaceプロパティを利用した制御
• inline-blockを活用した単語単位での分割防止

状況に応じて最適なプロパティを選択することによって、レイアウトの崩れを未然に防ぎながら、読みやすい表示を維持できます。

white-spaceプロパティで改行を禁止する

white-spaceプロパティに特定の値を与えることによって、要素内でのテキストの折り返しを禁止できます。

MDN公式による、white-spaceプロパティの定義は次の通りです。

white-space は CSS のプロパティで、要素内の ホワイトスペース をどのように扱うかを設定します。

出典:MDN Web Docs white-space

つまり、テキストの折り返しの有無を含めた空白文字の扱い方を制御するプロパティであり、nowrapを指定することで改行を禁止できます。

CSSで改行を防ぐ基本的な使い方は、以下のコードの通りです。

.nowrap-text {
  white-space: nowrap;
}

上記のコードでは、対象要素にwhite-spaceプロパティでnowrapを指定し、テキストの折り返しを禁止しています。

これにより、通常発生するはずのテキストの自動折り返しが抑止される仕組みです。ただし、明示的な改行タグや要素自体の幅・overflow処理の影響は別途受けるため、意図しないはみ出しが発生するケースがある点に注意してください。

inline-blockで単語の分割を防ぐ

文全体の改行を禁止するのではなく、特定の単語が途中で分割されるのを防ぐにはinline-blockが有効です。

対象の要素に対して適用する使い方は、以下のコードの通りです。

.keep-word {
  display: inline-block;
}

上記のコードでは、分割したくない単語を囲んだ要素にdisplay: inline-block;を指定しています。

要素全体がひとつのブロックとして扱われるため、不自然な位置での改行を回避できるのが特徴です。レスポンシブデザインにおいても、読みやすさを維持するのに役立ちます。

改行させないテキストのはみ出し対策では、デザイン崩れを防ぐための調整が不可欠です。CSSのプロパティを組み合わせることによって、はみ出したテキストを適切に処理できます。

レイアウトの要件に応じて、テキストを隠す方法や省略記号を表示する方法などを使い分けるのが一般的です。ここでは、実践的な3つの対策を解説します。

はみ出した部分を非表示にして隠す

はみ出した部分を非表示にして隠す手法は、限られたスペースにテキストを収めたい場合に使われます。CSSのoverflowプロパティにhiddenを指定するのが基本です。

以下のコードは、改行を禁止しつつ、要素の幅を超えたテキストを隠す例です。

.hidden-text {
  white-space: nowrap;
  overflow: hidden;
}

上記のコードでは、white-space: nowrap;でテキストの自動改行を防いでいます。その上で、overflow: hidden;を適用し、この要素自身の領域からはみ出た部分を非表示にしました。

この方法はシンプルですが、見切れたテキストがユーザーに伝わらなくなる点に注意が必要です。デザイン上、テキストが途切れても問題ない箇所でのみ使用してください。

三点リーダーを用いて省略表示する

三点リーダーを用いて省略表示するアプローチは、テキストの続きがあることを視覚的に伝えるのに有効です。省略記号を活用することによって、洗練されたUIを構築できます。

三点リーダーを表示するには、以下のコードのようにwidthで幅を制約した上でtext-overflowプロパティを使用します。

.ellipsis-text {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

上記のコードでは、width: 200px;で幅を制約した上で、要素からはみ出した部分を省略記号(…)で表示するよう指定しました。

この効果を得るには、幅やインラインサイズが制約されてテキストが折り返されない状態にした上で、overflowをvisible以外にする必要があります。overflow: hidden;はその条件を満たす代表的な指定です。

Flexアイテムに適用する場合は、min-width: 0;も併せて指定してください。spanなどの通常のインライン要素にそのまま適用してもwidthが効かないため、ブロック要素またはFlex/Gridアイテムに適用してください。

スクロールバーを表示させて対応する

スクロールバーを表示させて対応する手法は、はみ出したテキストを隠さずに全容を確認できるようにしたい場面で役立ちます。CSSを利用して、要素内でのスクロールを許可する仕組みです。

以下のコードは、幅を制約した上で横方向のスクロールバーを表示する設定例です。

.scroll-text {
  width: 250px;
  white-space: nowrap;
  overflow-x: auto;
}

上記のコードでは、width: 250px;で要素の幅を制約した上で、overflow-x: auto;を指定し、テキストが要素幅を超えた場合のみスクロールバーが現れるように設定しています。scrollを指定すると常にバーが表示されますが、autoなら必要なときだけ表示される仕様です。

スマートフォン向けの表組みやソースコードを表示するエリアなどで広く採用されています。ユーザーの利便性を損なわずに、意図しない自動改行を防ぐレイアウトを維持できるのが特徴です。

CSSでテキストを改行させない設定を行う際、Flexboxと組み合わせるとレイアウトが崩れるケースがあります。これは、Flexアイテム特有の初期値が原因です。

具体的な対策は、以下の通りです。

• Flexアイテムがコンテナからはみ出す原因を特定する
• 最小幅を指定してレイアウト崩れを解決する

Flexboxの特性を理解しておくことで、想定外のレイアウト崩れを未然に防ぎ、意図通りのデザインを実現できます。

Flexアイテムがコンテナからはみ出す原因を特定する

Flexboxを使用しているコンテナ内でテキストを改行させない設定を行うと、コンテナの幅を制約していてもFlexアイテムがコンテナの外へはみ出してしまうことがあります。

以下のコードは、改行させないCSSを適用した際にレイアウト崩れが発生する例です。

.flex-container {
  display: flex;
  width: 300px;
}
.flex-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

上記のコードでは、white-space: nowrap;を指定しているため、テキストは折り返されません。

Flexアイテムは、初期状態で中身のコンテンツ幅を下回らないよう最小サイズ(min-width: auto)を自動的に保持する仕様です。

その結果、.flex-itemはテキストの長さに応じて縮まずに幅が広がり、.flex-containerの幅を300pxのように制約していてもコンテナからはみ出してしまい、はみ出し対策のプロパティが効かなくなります。

最小幅を指定してレイアウト崩れを解決する

このレイアウト崩れを解決するには、原因となっているFlexアイテムに対して明示的に最小幅を指定する対応が必要です。

最小幅を指定してレイアウト崩れを解決する使い方は、以下の通りです。

.flex-item {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

上記のコードでは、Flexアイテムにmin-width: 0;を追加しています。この1行を追記するだけで、Flexアイテムがコンテナの幅を超えてはみ出すのを防ぐことが可能です。

Flexアイテムがコンテナからはみ出す場合は、この最小幅の指定が抜けていないか確認するとよいでしょう。

これにより、Flexアイテムの幅が正しく制約され、改行させないCSSによる省略表示が正常に機能する仕組みです。

nowrapが効かない主な原因は何ですか？

よくある原因として、親要素に適切な幅が設定されていないことやFlexbox環境特有の挙動が挙げられます(詳しくは前述の「Flexboxで改行させない際の崩れ対策」を参照してください)。

このほか、対象要素へセレクタが正しく適用されていない、詳細度の高い別のスタイルでwhite-spaceが上書きされている、<br>タグなどで明示的に改行を指定しているといったケースも確認しておきましょう。

スマホ表示で改行禁止を解除できますか？

メディアクエリを利用し、スマートフォン用のブレイクポイントでwhite-space: normal;を上書き指定して解除します。

画面幅が狭いデバイスでは、改行を許可しない設定のみだとレイアウト崩れや横スクロールが発生することがあります。overflow: hidden;や省略表示などのはみ出し処理を併用しつつ、画面幅ごとの見え方を確認してレスポンシブな対応を検討するのが基本です。

×

左へフリックで次のページ、右へフリックで前のページに戻れます左右の矢印ボタン、左右のスワイプで移動できます