English 是否有可能使用CSS将文本长度限制为“ n”行（或在垂直溢出时将其剪切）。
text-overflow: ellipsis; 仅适用于1行文字。
原文：
纳豆菌，马利筋，阿片草，法式
阿利盖特草，乌拉尔阿利奎特草，乌
骨茶！坐吧！乌贼属turpis
mus tincidunt！Dapibus sed aenean，magna sagittis，lorem velit
所需的输出（2行）：
胃纳豆菌，阿里卡姆，克拉斯在pellentesque
tincidunt elit purus lectus，vel ut aliquet，元素中...
我有一个效果很好的解决方案，但省略号使用渐变。当您具有动态文本时，它可以工作，因此您不知道它是否足够长，需要椭圆形。优点是您不必执行任何JavaScript计算，并且它适用于包括表单元格在内的可变宽度容器，并且是跨浏览器的。它使用了几个额外的div，但是很容易实现。
标记：
<td>
<div class="fade-container" title="content goes here">
content goes here
<div class="fade">
</div>
</td>
CSS：
.fade-container { /*two lines*/
overflow: hidden;
position: relative;
line-height: 18px;
/* height must be a multiple of line-height for how many rows you want to show (height = line-height x rows) */
height: 36px;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
}
.fade {
position: absolute;
top: 50%;/* only cover the last line. If this wrapped to 3 lines it would be 33% or the height of one line */
right: 0;
bottom: 0;
width: 26px;
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}
.class{
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 16px; /* fallback */
max-height: 32px; /* fallback */
-webkit-line-clamp: 2; /* number of lines to show */
-webkit-box-orient: vertical;
}
目前尚无法使用，但将来可以使用text-overflow:ellipis-lastline。目前在Opera 10.60+中可以使用带有供应商前缀的示例：example
您可以执行以下操作：
.max-lines {
display: block;/* or inline-block */
text-overflow: ellipsis;
word-wrap: break-word;
overflow: hidden;
max-height: 3.6em;
line-height: 1.8em;
}<p class="max-lines">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae leo dapibus, accumsan lorem eleifend, pharetra quam. Quisque vestibulum commodo justo, eleifend mollis enim blandit eu. Aenean hendrerit nisl et elit maximus finibus. Suspendisse scelerisque consectetur nisl mollis scelerisque.</p>其中max-height:= line-height:× <number-of-lines>in em。
据我所知，这只能通过使用来实现height: (some em value); overflow: hidden，即使这样最终也不会有幻想...。
如果这不是一个选择，我认为没有服务器端的预处理（很难，因为文本流无法可靠地预测）或jQuery（可能，但可能很复杂）是不可能的。
以下CSS类帮助我获得了两行省略号。
.two-line-ellipsis {
padding-left:2vw;
text-overflow: ellipsis;
overflow: hidden;
width: 325px;
line-height: 25px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
padding-top: 15px;
}
有一种方法可以使用非官方的行钳制语法，从Firefox 68开始，它可以在所有主要浏览器上使用。
.giveMeEllipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: N; /* number of lines to show */
}
除非您关心IE用户，否则没有必要做line-height和max-height回退。
Basic Example Code, learning to code is easy. Check Style CSS comments.