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

我有一个很好的解决方案，但省略号使用了渐变。当你有动态文本时，它会起作用，所以你不知道它是否足够长，需要一个椭圆。优点是您不必进行任何JavaScript计算，它适用于包括表格单元格在内的可变宽度容器，并且是跨浏览器的。它使用了一些额外的div，但它很容易实现。

标记：

<td>
    <div class="fade-container" title="content goes here">
         content goes here
         <div class="fade">
    </div>
</td>

CSS:

.fade-container { /*two lines*/
    overflow: hidden;
    position: relative;
    line-height: 18px; 
    /* height must be a multiple of line-height for how many rows you want to show (height = line-height x rows) */
    height: 36px;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
}

.fade {
        position: absolute;
        top: 50%;/* only cover the last line. If this wrapped to 3 lines it would be 33% or the height of one line */
        right: 0;
        bottom: 0;
        width: 26px;
        background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

博客文章：http://salzerdesign.com/blog/?p=453

示例页面：http://salzerdesign.com/test/fade.html

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

截至（几乎）2023年，不再需要一些旧的css规则。

这些显示了所需的最小值，并且可以跨浏览器工作，尽管有前缀语法：

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

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

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

该线程的解决方案是使用jquery插件dotdotdot。这不是一个CSS解决方案，但它为您提供了很多“阅读更多”链接、动态调整大小等选项。