CSSを使用してテキストの長さをn行に制限する 質問する

CSSを使用してテキストの長さをn行に制限する 質問する

CSS を使用してテキストの長さを「n」行に制限する (または垂直方向にオーバーフローする場合はカットする) ことは可能ですか。

text-overflow: ellipsis;1 行のテキストにのみ機能します。

原文:

ウルトリセスはマティスのナトクエを飲み、アリクアム、クラスはペレンテスクなティンシドゥントのエリートプルス
レクタスで、ベルウトアリケット、エレメントはヌンクヌンクロンクスプレイ
スラットウルナです!座れよ!そうすれば、あなたは
罰を受けるでしょう!ダピブスとアイネイア、マグナ・サギティス、ロレム・ヴェリト

必要な出力(2行):

Ultrices natoque mus mattis、aliquam、cras in pellentesque
tincidunt elit purus lectus、vel ut aliquet、elementum... について

ベストアンサー1

非公式の方法を使う方法がありますラインクランプ構文は Firefox 68 以降ですべての主要ブラウザで動作します。

body {
   margin: 20px;
}

.text {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
}
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>

line-heightIE ユーザーのことを気にしない限り、フォールバックを行う必要はありませんmax-height

おすすめ記事