<div class="text">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
<div class="text overOneLine">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
<div class="text overTwoLine">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
.text {
width: 150px;
background: red;
margin: 20px;
}
.overOneLine {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
.overTwoLine {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
如果是3 4 5....只需要把-webkit-line-clamp: 2; line-clamp: 2;改成对应行数