只是一个快速的基本想法。

我正在使用以下标记进行测试：

<div id="fos">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam.</p>  
</div>

和 CSS：

#fos { width: 300px; height: 190px; overflow: hidden; }
#fos p { padding: 10px; margin: 0; }

应用此 jQuery 将实现所需的结果：

var $p = $('#fos p');
var divh = $('#fos').height();
while ($p.outerHeight() > divh) {
    $p.text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}

它反复尝试删除文本的最后一个单词，直到达到所需的大小。因为溢出：隐藏；该过程仍然不可见，即使关闭 JS，结果仍然“视觉上正确”（当然没有“...”）。

如果您将此与服务器端的合理截断相结合（只留下很小的开销），那么它会运行得更快:)。

同样，这不是一个完整的解决方案，只是一个想法。

更新：添加了一个jsFiddle 演示。

试试jQuery.dotdotdot插件。

$(".ellipsis").dotdotdot();

用于“线夹”的 Javascript 库

请注意，“线夹”也称为“多线块上的省略号”或“垂直省略号”。

github.com/BeSite/jQuery.dotdotdot

• 优点：2.5Kb（缩小和压缩），repo 上没有大的活动，但也不错
• 缺点：jQuery 依赖，付费用于商业用途（CC-BY-NC-4.0 许可）
• 我的 2 美分：stackoverflow.com/questions/25187774/read-more-and-read-less-with-dotdotdot-jquery/29118739#29118739
• 有用的stackoverflow.com/questions/19015945/jquery-dotdotdot-expand-truncate-text-onclick
• 有用的要点.github.com/chiragparekh/c7e33dc749ed25544bde

github.com/josephschmitt/Clamp.js

• 缺点：代码仓库几乎不活跃
• 优点：信息丰富的reusablebits.com/post/2980974411/clamp-js-v0-2-explanations-and-performance

这里还有一些我还没有研究过：

• github.com/ftlabs/ftellipsis
• github.com/micjamking/Succinct
• github.com/pvdspek/jquery.autoellipsis和pvdspek.github.io/jquery.autoellipsis
• github.com/rviscomi/trunk8
• github.com/dobiatowski/jQuery.FastEllipsis
• github.com/theproductguy/ThreeDots
• github.com/tbasse/jquery-truncate
• github.com/kbwood/更多

用于线夹的 CSS 解决方案

有一些 CSS 解决方案，但最简单的用途-webkit-line-clamp是浏览器支持不佳。在jsfiddle.net/AdrienBe/jthu55v7/上查看现场演示

为了仅使用 CSS 实现这一点，许多人付出了巨大的努力。请参阅有关它的文章和问题：

• css-tricks.com/line-clampin : 5 星关于线夹的文章
• mobify.com/blog/multiline-ellipsis-in-pure-css：仅 CSS
• cssmojo.com/line-clamp_for_non_webkit-based_browsers/ : "mimic" -webkit-line-clamp 在非 webkit 浏览器中
• 使用 CSS，对溢出的多行块使用“...”
• 跨浏览器多行文本溢出，在固定宽度和高度内附加省略号
• 如何仅显示 div 的前几行（钳位）？
• jquery 限制段落中的行并在末尾应用三个句点
• 使用 CSS 将文本长度限制为 n 行

我会推荐什么

把事情简单化。除非您有大量时间专门用于此功能，否则请选择最简单且经过测试的解决方案：简单的 CSS 或经过良好测试的 javascript 库。

选择一些花哨/复杂/高度定制的东西，你将为此付出代价。

别人做什么

像 Airbnb 那样淡出可能是一个很好的解决方案。它可能是基本的 CSS 加上基本的 jQuery。实际上，它似乎与CSSTricks上的这个解决方案非常相似

哦，如果你寻找设计灵感：

• smashingmagazine.com/2009/07/designing-read-more-and-continue-reading-links/，从 2009 年开始……
• Dribbble 可能有有趣的设计......虽然我找不到收集它们的方法（通过搜索或标签），请随意分享相关链接

您可以将-webkit-line-clamp属性与div.

-webkit-line-clamp: <integer>这意味着在截断内容之前设置最大行数，然后(…)在最后一行的末尾显示省略号。

div {
  width: 205px;
  height: 40px;
  background-color: gainsboro;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  
  /* <integer> values */
  -webkit-line-clamp: 2;
}

<div>This is a multi-lines text block, some lines inside the div, while some outside</div>

在Adrien Be 的回答中找到了这个仅使用CSS 的简短解决方案：

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

截至2020 年 3 月， 浏览器支持率为95.3%，IE 和 Opera Mini 不支持。适用于 Chrome、Safari、Firefox 和 Edge。