css - 3 行の切り捨てに text-overflow:ellipsis を使用するには?

Question

CSS で省略記号を使用して、1 行ではなく 3 行のテキストの後で切り捨てるにはどうすればよいですか?

私はこれまでのところこれを持っていますが、1 行のテキストに対してのみ機能します。テキストを 2 回折り返す必要があります (引用のため)。

.truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 1

これは、まだすべての css3 ブラウザーで実行できるわけではなく、webkit のみで実行できます。

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}

本当に切り詰める必要がある場合は、 clamp.jsを使用します。