text-overflow: ellipsis; 溢出显示省略号
<style>
.box {
/* 限定范围 */
width: 300px;
height: 40px;
border: 1px solid red;
/* 1.溢出隐藏 */
overflow: hidden;
/* 2.用省略号来代替超出文本 */
text-overflow: ellipsis;
/* 3.设置盒子属性为-webkit-box 必须的 */
display: -webkit-box;
/* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
-webkit-line-clamp: 2;
/* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行 即一个单词可能会被分成两行展示 */
word-break: break-all;
/* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
-webkit-box-orient: vertical;
}
</style>
<body>
<div class="box">
生活不易，且行且珍惜。
</div>
</body>
加班万岁!
