.test{
width: 150px;
height:40px;
border:1px solid #000;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.test2{
width: 150px;
border:1px solid #000;
display: -webkit-box;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
overflow: hidden;
}
.test3{
width: 150px;
}
p{
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
<div class="test">测试在web开发过程中,常常会遇到要让布局中的某些文本根据宽度来显示</div>
<div class="test2">
测试在web开发过程中,常常会遇到要让布局中的某些文本根据宽度来显示
</div>
<div class="test3">
<p>测试在web开发过程中,常常会遇到要让布局中的某些文本根据宽度来显示</p>
</div>