テキストが特定の行を超える場合、超過分を ... で表示

テキストの行数を制限して、コンテンツのスペースを効果的に管理することで、ユーザーに対して読みやすいインターフェースを提供することができます。
表示したいテキストの量と利用可能なスペースに応じて、適切な行数での省略表示を活用してみましょう。

基本的な使い方

以下のCSSスタイルをテキストを表示している要素に適用することで、３行での省略表示を実現できます。
希望の行数に応じて数字を入れ替えてください。

.text-ellipsis-3lines {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

このスタイルでは、-webkit-line-clampプロパティを使用して、テキストの表示行数を制限しています。３に設定すると、テキストが３行を超える場合に超過分が省略され、行末に省略記号（...）が表示されます。

ブラウザの対応状況と注意点

-webkit-line-clampプロパティは、WebKitベースのブラウザ（例えば、SafariやChrome）で広くサポートされています。しかし、すべてのブラウザで対応しているわけではないため、Can I use... などのサイトでブラウザの対応状況を確認しましょう。