3

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

如果没有办法做到以上几点，有没有办法根据字符数进行限制？

4

4 回答 4

7

This snippet will help you.

Just Adjust Max-Height and Line-height for the change in font size. 

 .limit-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 21px;
    max-height: 48px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
 }
于 2014-12-22T14:40:26.673 回答
1

我有一些解决方法来解决您的问题（因为我认为这不可能通过 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

于 2013-02-04T11:26:04.977 回答
1

您可以修复 div 的高度并制作overflow为hidden

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

演示更新

或者

使用简单的Jquery方法

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

演示 2

于 2013-02-04T11:16:13.803 回答
1

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

于 2013-02-04T11:17:51.730 回答