CSSを使用して行数を制限する方法

1. クラスを使用した方法: 以下のCSSコードは、特定のクラスに適用されるテキストの行数を制限します。

   .line-limit {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 表示する行数 */
    -webkit-box-orient: vertical;
   }

   この例では、.line-limitクラスに適用されたテキストは、3行まで表示されます。それを超える部分は省略記号（...）で表示されます。

2. レスポンシブデザインに対応した方法: レスポンシブデザインを考慮しながら、行数制限を実現するためには、メディアクエリを使用することができます。以下は、モバイルデバイスとデスクトップデバイスに異なる行数を設定する例です。

   .line-limit {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* モバイルデバイスで表示する行数 */
    -webkit-box-orient: vertical;
   }
   @media (min-width: 768px) {
    .line-limit {
      -webkit-line-clamp: 3; /* デスクトップデバイスで表示する行数 */
    }
   }

   この例では、モバイルデバイスでは2行、デスクトップデバイスでは3行までテキストが表示されます。

これらの方法を使って、テキストの行数を制限することができます。必要に応じて、適用する要素や行数を調整してください。また、-webkit-プレフィックスは一部のブラウザで必要な場合があるため、他のプレフィックスも追加することをお勧めします。