有一种方法可以使用非官方的换行符语法，从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用户，否则无需进行线高度和最大高度回退。

这对我有用：

第二部分{宽度：200px；}p型{显示：块；/*非webkit的回退*/显示：-webkit框；高度：2.6em；/*非webkit的回退，线宽*2*/线高：1.3em；-webkit线夹：2；/*如果更改此设置，请确保更改回退线的高度和高度*/-webkit框方向：垂直；溢出：隐藏；文本溢出：省略号；}＜div＞<p>Lorem ipsum dolor坐amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore</p>＜div＞

.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;
}

我真的很喜欢线夹，但还不支持firefox。。所以我做了一个数学计算，然后隐藏溢出

.body-content.body-overflow-hidden h5 {
    max-height: 62px;/* font-size * line-height * lines-to-show(4 in this case) 63px if you go with jquery */
    overflow: hidden;
}
.body-content h5 {
    font-size: 14px; /* need to know this*/
    line-height:1,1; /*and this*/
}

现在让我们假设你想通过jQuery删除并添加这个类，你需要有一个额外的像素，所以它的最大高度是63像素，这是因为你需要每次检查高度是否大于62像素，但是在4行的情况下，你会得到一个假真，所以额外的像素可以解决这个问题，不会产生任何额外的问题

我将为此粘贴一个coffee脚本，作为一个示例，它使用了默认隐藏的两个链接，类读得更多，读得更少，它将删除溢出不需要的链接，并删除主体溢出类

jQuery ->

    $('.read-more').each ->
        if $(this).parent().find("h5").height() < 63
             $(this).parent().removeClass("body-overflow-hidden").find(".read-less").remove()
             $(this).remove()
        else
            $(this).show()

    $('.read-more').click (event) ->
        event.preventDefault()
        $(this).parent().removeClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-less').show()

    $('.read-less').click (event) ->
        event.preventDefault()
        $(this).parent().addClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-more').show()

.word-limit{
   display: block;
   text-overflow: ellipsis;
   white-space: nowrap;
   word-wrap: break-word;
   overflow: hidden;
}

如果你想专注于每一封信，你可以这样做，我提到这个问题

函数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（文本）；