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

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

基本示例代码，学习代码很容易。检查样式CSS注释。

表tr{显示：柔性；}表tr td{/*启动*/显示：内联块；/*<-在显示css中防止<tr>*/文本溢出：省略号；空白：nowrap；/*完*/填充：10px；宽度：150px；/*空间大小限制*/边框：1px实心黑色；溢出：隐藏；}<表><tbody><tr><td>Lorem ipsum dolor坐amet，consectetur adipiscing elit。Nulla egestas erat ut luctus posuere。Praesent和commodo eros。在tellus中，Vestibulum eu nisl vel dui ultrices ultricies vel。</td><td>Praesent vitae tempus nulla。Donec vel porta velit公司。Fusce mattis enim前任Mauris eu malesuada ante。Aenean id aliquet leo，nec ultricies tortor。Curabitur non mollis elit。Morbi euismod ante amet iaculis pharetra。Mauris id ultricies urna。崩溃尼西多尔。Curabitur tellus erat，调味品ac enim non，varius tempor nisi。Donec dapibus justo odio，sed consequat eros feugiat feugiat。</td><td>Pellentesque mattis consequat ipsum sed sagitis。Pellentsque consectetur前庭odio，aliquet auctor ex elementum sed。悬疑门massa nisl，quis interstie libero auctor varius。Ut erat nibh，流苏状舌舌Ut，iaculis interdum sapien。我的格言，坐在我的圣经中间。</td></tr><tr><td>Sed viverra massa laoret urna dictum，et frigilla dui调戏。杜伊斯·波塔（Duis porta）、弗内纳蒂斯前舌（ligula ut venenatis pretium）、智人（sapien tellus blandit felis）、非龙虾（non-lobortis orci erated justo）。Vivamus hendrerit、iaculis vehicula、nibh nisi fermentum auge、sagitis的quamnibh dui等人。</td><td>Nullam mollis nullaa justo，nec tincidunt urna suscipit non。Donec malesuada dolor non dolor interdum，id ultrices neque egestas。整只怀孕大熊猫坐在直径为欧盟的地方。Etiam dignissim坐在自由大熊猫的地方，在consequat est阿利奎特。</td><td>猫的前庭，对其他动物来说，是一种非常重要的动物。Fusce egestas，volutpat impredite中的兽人，risus velit convallis sapien，sodales lobortis risus lectus id leo。Nunc vel diam vel Nunc congue finibus。龟头前庭，咽鼓管，耳鼻喉舌。Donec rutrum purus在tincidunt sagitis。只要你愿意就好了。</td></tr></tbody></table>

.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()

您可以执行以下操作：

.max行{显示：块；/*或内联块*/文本溢出：省略号；换行：换行；溢出：隐藏；最大高度：3.6em；线高：1.8em；}<p class=“max lines”>Lorem ipsum dolor坐amet，consectetur adipiscing elit。Nunc vitae leo dapibus，accumsan lorem eleifend，pharetra quam。Quisque前庭commodo justo，eleifend mollis enim blandit eu。Aenean hendrerit nisl et elit maximus finibus公司。Suspendis scelerisque consectetur nisl mollis sceleriske</p＞

其中，最大高度：=线高度：×<线数>（单位：em）。