是否可以使用CSS将文本长度限制为“n”行（或在垂直溢出时剪切）。
文本溢出：省略号；仅适用于1行文本。
原文：
Ultrices natoque mus mattis、aliquam、cras in pellentesquetincidunt elit purus lectus、vel ut aliquet、elementum nunc乌尔纳修女院！坐下！图比斯岛莫斯·廷西杜特！Dapibus sed aenean、magna sagitis、lorem velit
所需输出（2行）：
Ultrices natoque mus mattis、aliquam、cras in pellentesquetincidunt elit purus lectus，velut aliquet，elementum。。。
当前回答
如果你想专注于每一封信，你可以这样做，我提到这个问题
函数truncate（源，大小）{返回源.length>size？source.sslice（0，大小-1）+“…”：源；}var text=truncate（'truncate text to fit in 3 lines'，14）；console.log（文本）；
如果你想专注于每个单词，你可以这样做+空格
consttruncate=（title，limit=14）=>｛//14是默认参数常量newTitle=[]；if（title.length>limit）{title.split（“”）.reduce（（acc，cur）=>{如果（acc+cur.length<=极限）{newTitle.push（cur）；}返回acc+cur.length；}, 0);return newTitle.join（“”）+“…”}返回标题；}var text=truncate（'truncate text to fit in 3 lines'，14）；console.log（文本）；
如果你想专注于每个单词，你可以这样做+没有空格
consttruncate=（title，limit=14）=>｛//14是默认参数常量newTitle=[]；if（title.length>limit）{Array.prototype.slice.call（title）.reduce（（acc，cur）=>{如果（acc+cur.length<=极限）{newTitle.push（cur）；}返回acc+cur.length；}, 0);return newTitle.join（“”）+“…”}返回标题；}var text=truncate（'truncate text to fit in 3 lines'，14）；console.log（文本）；
其他回答
有一种方法可以使用非官方的换行符语法，从Firefox 68开始，它可以在所有主流浏览器中使用。
正文{边距：20px；}.text（文本）{溢出：隐藏；文本溢出：省略号；显示：-webkit框；-webkit线夹：2；/*要显示的行数*/线夹：2个；-webkit框方向：垂直；}<div class=“text”>Lorem ipsum dolor坐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。克雷斯·里苏斯·尼西，accumsan vel cursus ut，sollicitudin vitae dolor。《圣经》中的Fusce scelerisque eleifend lectus。lacinia egestas suspendissa felis a volutpat。</div>
除非您关心IE用户，否则无需进行线高度和最大高度回退。
目前不能，但将来可以使用文本溢出：ellipis lastline。目前，它可以在中使用供应商前缀Opera 10.60+：示例
我有一个很好的解决方案，但省略号使用了渐变。当你有动态文本时，它会起作用，所以你不知道它是否足够长，需要一个椭圆。优点是您不必进行任何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%);
}
博客文章：http://salzerdesign.com/blog/?p=453
示例页面：http://salzerdesign.com/test/fade.html
据我所知，这只可能使用高度：（一些em值）；溢出：隐藏，即使这样它也不会有幻想。。。最后。
如果这不是一个选项，我认为没有一些服务器端预处理（很难，因为文本流不可能可靠地预测）或jQuery（可能但可能很复杂）是不可能的。
您可以执行以下操作：
.max行{显示：块；/*或内联块*/文本溢出：省略号；换行：换行；溢出：隐藏；最大高度：3.6em；线高：1.8em；}<p class=“max lines”>Lorem ipsum dolor坐amet，consectetur adipiscing elit。Nunc vitae leo dapibus，accumsan lorem eleifend，pharetra quam。Quisque前庭commodo justo，eleifend mollis enim blandit eu。Aenean hendrerit nisl et elit maximus finibus公司。Suspendis scelerisque consectetur nisl mollis sceleriske</p＞
其中，最大高度：=线高度：×<线数>（单位：em）。
