<style>
.box1 {
width: 150px;
height: 80px;
background-color: pink;
/* 文字显示不开自动换行 */
/* white-space: normal; */
/* 文字显示一行 */
white-space: nowrap;
/* 溢出的部分隐藏起来 */
overflow: hidden;
/* 文字溢出的时候用省略号代替 */
text-overflow: ellipsis;
}
.box2 {
width: 150px;
height: 80px;
background-color: red;
/* 溢出的部分隐藏起来 */
overflow: hidden;
/* 文字溢出的时候用省略号代替 */
text-overflow: ellipsis;
display: -webkit-box;
/* 文字行数 */
-webkit-line-clamp: 2;
/* 排列方式 */
-webkit-box-orient: vertical;
}
</style>
<!-- 1.显示一行 （必须定义盒子高宽）-->
<div class="box1">
我就显示一行，其他省略一万字。
</div>
<!-- 2.显示多行 （必须定义盒子高宽）-->
<div class="box2">
我就可以显示2行或者3行，其他省略一万字其他省略一万字。
</div>
