概要

CSSのtext-overflowプロパティは、テキストが指定された領域を超えてはみ出す場合に、その表示方法を制御するためのプロパティです。特に、長いテキストがコンテナに収まらない場合に、見た目を整えるためによく使われます。この記事では、text-overflowの基本的な使い方から、応用的なテクニックまで詳しく解説します。

基本構文

text-overflowプロパティの基本構文は以下の通りです。

text-overflow: 値;

主な値は以下の通りです：

• clip
  デフォルト値。テキストがはみ出した部分を切り捨てます（何も表示されません）。
• ellipsis
  テキストのはみ出し部分を省略記号（…）で示します。
• カスタム文字列
  特定の文字列でテキストを切り詰めます（ブラウザサポートは限定的）。

基本的な使用例

.overflow-example {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* はみ出し部分を省略記号で表示 */
}

このコードは、要素の幅を200pxに制限し、長いテキストがあった場合に省略記号で表現する設定です。

text-overflowの各プロパティの詳細

clip

clipはデフォルトの動作で、テキストがはみ出した部分を表示しません。特に設定しない場合はこの動作になりますが、視覚的なフィードバックがないため、ほとんどの場合でellipsisが好まれます。

.clip-example {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip; /* はみ出し部分を切り捨てる */
}

ellipsis

ellipsisは、テキストがはみ出した場合に省略記号（…）で表示する設定です。これにより、内容が省略されていることを視覚的に示すことができます。

.ellipsis-example {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 省略記号でテキストを表示 */
}

カスタム文字列

一部のブラウザでは、特定の文字列を使ってテキストのはみ出し部分を表示できますが、サポートが限定的なため、一般的にはあまり使われません。

.custom-example {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: " >>"; /* はみ出し部分をカスタム文字列で表示（サポートは限定的） */
}

text-overflowを効果的に使うための他のプロパティ

必須プロパティ

text-overflowを効果的に使用するためには、以下のプロパティとの組み合わせが必要です：

1. white-space: nowrap;
   テキストを折り返さず、一行に表示させます。
2. overflow: hidden;
   はみ出したコンテンツを非表示にします。 これらのプロパティが設定されていない場合、text-overflowは機能しません。

例：基本的な組み合わせ

.text-overflow-container {
  width: 200px;
  white-space: nowrap; /* テキストを一行にする */
  overflow: hidden; /* はみ出した部分を隠す */
  text-overflow: ellipsis; /* 省略記号を表示 */
}

この設定により、長いテキストがコンテナに収まらない場合に、省略記号を表示しながら見た目を整えることができます。

応用例

マルチラインでの省略

text-overflowは基本的に一行テキストでの使用がメインですが、マルチラインでの省略を実現することも可能です。これには、line-clampを使用しますが、主にWebKitベースのブラウザでサポートされています。

.multi-line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 表示する行数を指定 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

このコードは、テキストが2行を超えた場合に省略記号を表示します。

カードデザインでの使用

カードデザインでテキストが長すぎる場合に省略記号を使って表示を制御し、レイアウトを崩さないようにすることができます。

.card-description {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

この設定により、長い説明文でも見た目を整えた状態で表示することが可能です。

テーブルセルでの使用

テーブル内のセルに対してtext-overflowを使用することで、列幅を固定しつつ、テキストがはみ出す場合には省略記号で見た目を整えることができます。

.table-cell {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

このような設定により、テーブルの見栄えが整い、ユーザーに対して情報が省略されていることを示せます。

注意点

• サポートブラウザ: text-overflowはほとんどのモダンブラウザでサポートされていますが、line-clampなどの一部の応用テクニックはWebKitベースのブラウザに限られる場合があります。
• 一行の制約: text-overflowは基本的に一行テキスト用のプロパティであり、複数行の省略には別のプロパティ（line-clampなど）と組み合わせる必要があります。

まとめ

CSSのtext-overflowプロパティは、テキストが指定領域を超えて表示される場合に、省略記号などを使って視覚的に制御するための便利なプロパティです。white-spaceやoverflowプロパティと組み合わせて使うことで、レイアウトを崩さずに美しく情報を表示することができます。さまざまな場面で積極的に活用して、見た目の整ったデザインを実現しましょう。