<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>