对此，我提出了自己的解决方案:

/*this JS code puts the ellipsis (...) at the end of multiline ellipsis elements
 *
 * to use the multiline ellipsis on an element give it the following CSS properties
 * line-height:xxx
 * height:xxx (must line-height * number of wanted lines)
 * overflow:hidden
 *
 * and have the class js_ellipsis
 * */

//do all ellipsis when jQuery loads
jQuery(document).ready(function($) {put_ellipsisses();});

//redo ellipsis when window resizes
var re_ellipsis_timeout;
jQuery( window ).resize(function() {
    //timeout mechanism prevents from chain calling the function on resize
    clearTimeout(re_ellipsis_timeout);
    re_ellipsis_timeout = setTimeout(function(){ console.log("re_ellipsis_timeout finishes"); put_ellipsisses(); }, 500);
});

//the main function
function put_ellipsisses(){
    jQuery(".js_ellipsis").each(function(){

        //remember initial text to be able to regrow when space increases
        var object_data=jQuery(this).data();
        if(typeof object_data.oldtext != "undefined"){
            jQuery(this).text(object_data.oldtext);
        }else{
            object_data.oldtext = jQuery(this).text();
            jQuery(this).data(object_data);
        }

        //truncate and ellipsis
        var clientHeight = this.clientHeight;
        var maxturns=100; var countturns=0;
        while (this.scrollHeight > clientHeight && countturns < maxturns) {
            countturns++;
            jQuery(this).text(function (index, text) {
                return text.replace(/\W*\s(\S)*$/, '...');
            });
        }
    });
}

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

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

https://github.com/Xela101/Ellipsity

我终于找到了做我想做的事的方法。 作为段落和文章的包装。 如果你想根据文章高度(也取决于窗口高度)对p应用省略号，你需要得到文章的高度，p的行高度，然后articleHeight/lineHeight来找到可以动态添加的线夹的数量。

唯一的问题是行高应该在css文件中声明。

检查下面的代码。如果你改变窗户的高度，线夹也会改变。创建一个旨在实现这一目标的插件是很好的。

斯菲德尔

function lineclamp() { var lineheight = parseFloat($('p').css('line-height')); var articleheight = $('article').height(); var calc = parseInt(articleheight/lineheight); $("p").css({"-webkit-line-clamp": "" + calc + ""}); } $(document).ready(function() { lineclamp(); }); $( window ).resize(function() { lineclamp(); }); article { height:60%; background:red; position:absolute; } p { margin:0; line-height:120%; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <article> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec. Quisque quis ultrices erat.Nulla gravida ipsum nec sapien pellentesque pharetra. Suspendisse egestas aliquam nunc vel egestas. Nullam scelerisque purus interdum lectus consectetur mattis. Aliquam nunc erat, accumsan ut posuere eu, vehicula consequat ipsum. Fusce vel ex quis sem tristique imperdiet vel in mi. Cras leo orci, fermentum vitae volutpat vitae, convallis semper libero. Phasellus a volutpat diam. Ut pulvinar purus felis, eu vehicula enim aliquet vitae. Suspendisse quis lorem facilisis ante interdum euismod et vitae risus. Vestibulum varius nulla et enim malesuada fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lorem ligula, lacinia a justo sed, porttitor vulputate risus. In non feugiat risus. Sed vitae urna nisl. Duis suscipit volutpat sollicitudin. Donec ac massa elementum massa condimentum mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla sollicitudin sapien at enim sodales dapibus. Pellentesque sed nisl eu sem aliquam tempus nec ut leo. Quisque rutrum nulla nec aliquam placerat. Fusce a massa ut sem egestas imperdiet. Sed sollicitudin id dolor egestas malesuada. Quisque placerat lobortis ante, id ultrices ipsum hendrerit nec.</p></article>

如果您想对单行文本应用省略号(…)，CSS通过text-overflow属性使之变得有些容易。这仍然有点棘手(由于所有的要求-请参阅下面)，但文本溢出使它成为可能和可靠的。

然而，如果您想在多行文本上使用省略号——就像这里的情况一样——那么就别指望有什么乐趣了。CSS没有标准的方法来做到这一点，而且变通方法是随机的。

单行文本的省略

使用文本溢出，省略号可以应用于单行文本。CSS的要求如下:

必须有一个宽度，最大宽度或弹性基础 必须有空白:nowrap 必须有溢出的值而不是可见的 必须显示:块或内联块 (或功能对等物，如伸缩项目)。

这是可行的:

p { width: 200px; white-space: nowrap; overflow: hidden; display: inline-block; text-overflow: ellipsis; border: 1px solid #ddd; margin: 0; } <p> This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. </p>

新美国jsFiddle

但是，尝试删除宽度，或让溢出默认为可见，或删除空白:nowrap，或使用块容器元素以外的东西，AND，省略号失败得很惨。

这里有一个重要的结论:text-overflow:省略号对多行文本没有影响。(仅white-space: nowrap要求就消除了这种可能性。)

p { width: 200px; /* white-space: nowrap; */ height: 90px; /* new */ overflow: hidden; display: inline-block; text-overflow: ellipsis; border: 1px solid #ddd; margin: 0; } <p> This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. This is a test of CSS <i>text-overflow: ellipsis</i>. </p>

新美国jsFiddle

多行文本的省略

因为CSS在多行文本上没有省略号属性，所以创建了各种变通方法。这些方法可以在这里找到:

jQuery dotdotdot…… 行截断(截断多行文本) CSS省略:如何在纯CSS中管理多行省略 多行文本截断的纯CSS解决方案

上面的Mobify链接被删除了，现在引用了archive.org的副本，但似乎在这个代码依赖中实现了。

You can achieve this by a few lines of CSS and JS.

CSS:

        div.clip-context {
          max-height: 95px;
          word-break: break-all;
          white-space: normal;
          word-wrap: break-word; //Breaking unicode line for MS-Edge works with this property;
        }

JS:

        $(document).ready(function(){
             for(let c of $("div.clip-context")){
                    //If each of element content exceeds 95px its css height, extract some first 
                    //lines by specifying first length of its text content. 
                   if($(c).innerHeight() >= 95){
                        //Define text length for extracting, here 170.
                        $(c).text($(c).text().substr(0, 170)); 
                        $(c).append(" ...");
                   }
             }

        });

HTML:

        <div class="clip-context">
            (Here some text)
        </div>

我在YouTube的主页上看了一下它是如何解决这个问题的，并进行了简化:

.multine-ellipsis {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

这将允许2行代码，然后附加一个省略号。

要点:https://gist.github.com/eddybrando/386d3350c0b794ea87a2082bf4ab014b