CSSを使用した2行のテキストの切り詰め方法

方法1: text-overflowプロパティを使用する方法

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

この方法では、テキストが指定した行数を超える場合に、末尾に省略記号（...）が表示されます。

方法2: white-spaceプロパティを使用する方法

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 表示する行数 */
  -webkit-box-orient: vertical;
  white-space: nowrap;
}

この方法では、テキストが指定した行数を超える場合に、水平方向にスクロールバーが表示されます。

方法3: JavaScriptを使用する方法

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

この方法では、テキストが指定した行数を超える場合に、マウスオーバー時に全体のテキストが表示されます。

これらの方法を使用すると、2行に切り詰められたテキストをスタイリッシュに表示することができます。適用する方法は、デザインや要件に応じて選択してください。