【CSS】文字数制限をする方法

WebサイトやアプリのUIデザインにおいて、テキストの長さを制限することはよくあります。CSSを使えば、文字数を制限しながら、ユーザーに適切な情報を伝えることができます。本記事では、CSSを使った文字数制限の方法を詳しく解説します。

text-overflow を使って省略記号を表示する

単行のテキストが指定した幅を超えた場合に、省略記号 (…) を表示する方法です。

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

適用例：

これはとても長い文章ですが、CSSで文字数制限をかけています。

複数行のテキストを制限し、省略記号を表示する場合は -webkit-line-clamp を使用します。

.multiline-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

適用例：

省略記号が付きます。これはとても長い文章ですが、CSSで複数行の文字数制限をかけています。2行目以降は省略され、省略記号が付きます。これはとても長い文章ですが、CSSで複数行の文字数制限をかけています。2行目以降は省略され、省略記号が付きます。

ch 単位を使うと、文字数の幅で制限をかけることができます。

.char-limit {
  width: 10ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

適用例：

1234567890ABCDEFGHIJKLMN

文字の行数を制限し、超えた部分を隠す方法もあります。

.max-height-limit {
  max-height: 3em;
  overflow: hidden;
}

方法	単行対応	複数行対応	省略記号
text-overflow: ellipsis;	✅	❌	✅
-webkit-line-clamp	❌	✅	✅
ch 単位	✅	❌	✅
max-height	❌	✅	❌

文字数制限の用途に応じて適切な方法を選びましょう！