文本溢出无效

Question

详细信息：

我在css 文本溢出中遇到问题。 实际上我的div包含大文本内容，但我希望它只显示四行，我想删除这个重叠的内容。 我怎么能做到这一点？

我的重叠内容

CSS代码：

.divclass {
    width:90%;
    display: block;
    float: right; 
    text-overflow: ellipsis;
    overflow:hidden;
}

Answer 1

You can't use pure css text-overflow with multi-line text（抱歉）

你最好使用像dotdotdot这样的东西：

$(document).ready(function() {
    $(".divclass").dotdotdot();
});

Answer 2

作为一种好奇心，它可以通过webkit浏览器完成：

display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;

Answer 3

你可以在javascript中使用子字符串或试试这个：

的样品： 的

var strings = 'Text contents';
if(strings.length > 10) 
strings = strings.substring(0,10);

Answer 4

为.divclass指定一个高度

 .divclass { max-height: 150px; }

或四行所需的最大高度

Answer 5

试试这个白色空间：nowrap;

.divclass {
width:90%;
display: block;
float: right; 
text-overflow: ellipsis;
overflow:hidden;
white-space:nowrap; 
}

Answer 6

使用它，没有jQuery的工作

.divclass {
            height:25px;
            overflow:hidden;
            width:50%;
            text-overflow:ellipsis;
            display:block;
            white-space:nowrap;
        }