使用CSS将文本长度限制为n行 [英] Limit text length to n lines using CSS

问题描述

可以使用CSS将文本长度限制为n行（或者在垂直溢出时将其剪切）。

Is it possible to limit a text length to "n" lines using CSS (or cut it when overflows vertically).

overflow：ellipsis; 仅适用于1行文本。

text-overflow: ellipsis; only works for 1 line text.

原始文字：

Ultrices natoque mus mattis，aliquam，cras in pellentesque

tincidunt elit purus lectus，vel ut aliquet，elementum nunc

nunc rhoncus placerat urna！坐下！ Utatatibus turpis

mus tincidunt！ Dapibus sed aenean，magna sagittis，lorem velit

Ultrices natoque mus mattis, aliquam, cras in pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum nunc
nunc rhoncus placerat urna! Sit est sed! Ut penatibus turpis
mus tincidunt! Dapibus sed aenean, magna sagittis, lorem velit

想输出（2行）：

在pellentesque中的珍珠饼，aliquam，cras

tincidunt elit purus lectus，vel ut aliquet，elementum ...

Ultrices natoque mus mattis, aliquam, cras in pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum...

推荐答案

有一种方法，但它只是webkit。但是，当将它与 line-height：X; 和 max-height：X * N; 它也将在其他浏览器中工作，只是没有省略号。

There is a way, but it is webkit-only. However, when you combine this with line-height: X;, and max-height: X*N;, it will also work in other browsers, just without ellipses.

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

这篇关于使用CSS将文本长度限制为n行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！