Question

给定一长串内容，我想只显示前两行文本。此内容的容器是流动的，并将调整大小到浏览器的宽度。无论容器的宽度如何，我希望文本始终只显示2行。有没有办法做到这一点？

如果无法执行上述操作，是否有基于字符数限制的方法？

Answer 1

此代码段将为您提供帮助。

只需调整最大高度和行高即可更改字体大小。

 .limit-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 21px;
    max-height: 48px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
 }

Answer 2

您可以修正div的高度，并将overflow设为hidden

    div{
    height:auto;
    max-height:40px;
    overflow:hidden; 
    background:red
}

<强> DEMO UPDATED

或

使用简单的Jquery方法

$('p').condense({ellipsis:'…', condensedLength: 55});

<强> DEMO 2

Answer 3

纯CSS解决方案意味着对文本块和'text-overflow`属性使用规定的高度。这很难实现，因为CSS没有线条的概念。相反，JavaScript解决方案意味着匹配换行符的正则表达式。

Answer 4

我知道一些解决方法来解决你的问题（我认为这不可能通过css实现）。

所以，我的解决方案如下：

var height = parseInt($("#foo").css("line-height"));
var lineCount = 2;
height *= lineCount;

$("#foo").css("height", height + "px");

您获取容器的line-height并将height容器设置为line-height * lineCount。

jsFiddle

CSS - 文本溢出：仅显示2行文本

4 个答案: