我真的很喜欢线夹，但还不支持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;
}

我真的很喜欢线夹，但还不支持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()

据我所知，这只可能使用高度：（一些em值）；溢出：隐藏，即使这样它也不会有幻想。。。最后。

如果这不是一个选项，我认为没有一些服务器端预处理（很难，因为文本流不可能可靠地预测）或jQuery（可能但可能很复杂）是不可能的。

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

工作跨浏览器解决方案

这个问题多年来一直困扰着我们大家。

为了在所有情况下都有所帮助，我列出了仅CSS的方法，以及一个jQuery方法，以防CSS警告出现问题。

这里是我提出的一个仅限CSS的解决方案，它在所有情况下都有效，但有一些小的注意事项。

基本原理很简单，它隐藏跨度的溢出，并根据Eugene Xa建议的线高度设置最大高度。

然后在包含div之后有一个伪类，它很好地放置了省略号。

注意事项

此解决方案将始终放置省略号，无论是否需要省略号。

如果最后一行以结尾句结尾，你将以四个点结尾。。。。

您需要对文本对齐方式感到满意。

省略号将位于文本的右侧，看起来很草率。

代码+代码段

小提琴演奏家

.text（文本）{位置：相对；字体大小：14px；颜色：黑色；宽度：250px；/*可以是你喜欢的任何东西*/}.text凹面{位置：相对；显示：内联块；换行：换行；溢出：隐藏；最大高度：3.6em；/*（要显示的行数）*（行高）*/线高：1.2em；文本对齐：对齐；}.text.省略号：：之后{content:“…”；位置：绝对；右：-12px；底部：4px；}/*psudo类的右侧和底部是基于各种因素、字体大小等的像素。根据自己的需要调整*/<div class=“text省略号”><span class=“text concat”>Lorem ipsum dolor坐amet，笔尖eleifend cu his，porro fugit mandamus no mea。坐着讲故事，每个人都有一段对话，每个人也有一段相扑。在nominavi percula harsti ius，在sonet tincidunt，cu pose facilisis eos。每一次选择权争议，都没有任何人的意见。Eu已经得出结论，最初的决定是在。Virtute feugait eivim公司。社区诚实互助协会（Commune honestatis accommodare pri ex.Ut est civilbus accumsam），原则上的概念，以及两个案例。在双人间聚会。我已经为你的职业生涯做好了准备。重要的是，现场设施，包括现场脚本。</span></div>

jQuery方法

在我看来，这是最好的解决方案，但不是每个人都可以使用JS。基本上，jQuery将检查任何.text元素，如果有比预设的max-var更多的字符，它将删除其余字符并添加省略号。

对于这种方法没有任何警告，但是这个代码示例仅用于演示基本思想-我不会在生产中使用它，除非对其进行改进，原因有两个：

1） 它将重写.text元素的内部html。无论是否需要。2） 它不需要检查内部html是否没有嵌套的元素，因此您非常依赖作者来正确使用.text。

已编辑

感谢您的捕获@markzzz

代码段（&S）

小提琴演奏家

setTimeout（函数）{var最大值=200；变量tot，str；$（'.text'）.each（函数）{str=字符串（$（this）.html（））；tot=字符串长度；str=（总计<=最大值）? 字符串：str.substring（0，（最大值+1））+“…”；$（this）.html（str）；});},500); // 延迟仅作为示例。.text（文本）{位置：相对；字体大小：14px；颜色：黑色；字体系列：无衬线；宽度：250px；/*可以是你喜欢的任何东西*/}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><p class=“text”>老年人往往会忘记年轻时的想法；他们忘记了思维跳跃的敏捷，年轻人直觉的大胆，新鲜洞察力的敏捷。他们习惯于各种各样的理性，因为这不仅仅是经验的积累，老年人认为自己比年轻人更聪明。</p><p class=“text”>老年人往往会忘记年轻时的想法；</p><!-- 工作跨浏览器解决方案这是一种jQuery方法，用于将文本正文限制为n个单词，并以省略号-->结尾