display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
方法一(text-overflow):只适合一行不换行。
<div class="box1">
<span>
this is the test text!this is the test text!this is the test text!this is the test text!this is the test text!this is the test text!this is the test text!
</span>
</div>
.box1{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
优点:简单、兼容好