如果你正在使用javascript，也许你可以像下面这样做。 然而，这并没有考虑到集装箱的高度…

// whatever string const myString = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque sem ut consequat pulvinar. Curabitur vehicula quam sit amet risus aliquet, sed rhoncus tortor fermentum. Etiam ac fermentum nisi. Ut in lobortis eros. Etiam urna felis, interdum sit amet fringilla eu, bibendum et nunc.'; // you can set max string length const maxStrLength = 100; const truncatedString = myString.length > maxStrLength ? `${myString.substring(0, maxStrLength)}...` : myString; console.log(truncatedString);

也许这个能帮到你们。多线椭圆与工具提示悬停。 https://codepen.io/Anugraha123/pen/WOBdOb

<div>
     <p class="cards-values">Lorem ipsum dolor sit amet,   consectetur adipiscing elit. Nunc aliquet lorem commodo, semper mauris nec, suscipit nisi. Nullam laoreet massa sit amet leo malesuada imperdiet eu a augue. Sed ac diam quis ante congue volutpat non vitae sem. Vivamus a felis id dui aliquam tempus
      </p>
      <span class="tooltip"></span>
</div>

糟糕的CSS不支持跨浏览器多行夹紧，只有webkit似乎在推动它。

你可以尝试使用一个简单的Javascript省略号库，比如github上的Ellipsity，源代码非常干净和小，所以如果你确实需要做任何额外的改变，它应该很容易。

https://github.com/Xela101/Ellipsity

增加-webkit-线夹:4;增加行数:

p { 显示： -网络套件盒; 最大宽度：200px; -网络套件线夹： 4; -网络套件盒方向：垂直; 溢出：隐藏; } <p>Lorem ipsum dolor sit amet， novum menandri adrivalrium ad vim， ad his persius nostrud conclusionemque.Ne qui atomorum pericula honestatis.Te usu quaeque detracto， idque nulla pro ne， ponderum invidunt eu duo.Vel velit tincidunt in， nulla bonorum id eam， vix ad fastidii consequat definitionem.</p>

线夹是一种专有的无文档的CSS (webkit): https://caniuse.com/#feat=css-line-clamp，所以它目前只适用于少数浏览器。

删除重复的“显示”属性+删除不必要的“文本溢出:省略号”。

在浏览了整个互联网并尝试了很多这些选项后，唯一能确保它正确覆盖支持i.e.的方法是通过javascript，我创建了一个循环函数来查看需要多行截断的post项目。

*注意我使用Jquery，并要求你的post__items类有一个固定的最大高度。

// loop over post items
$('.post__items').each(function(){
    var textArray = $(this).text().split(' ');
    while($(this).prop('scrollHeight') > $(this).prop('offsetHeight')) {
        textArray.pop();
        $(this).text(textArray.join(' ') + '...');
     }
});

不幸的是，在CSS的当前状态下没有。

省略号渲染有一个先决条件:空白:nowrap，这实际上意味着:省略号只在单行文本容器上绘制。