前端学习笔记：溢出文字显示省略号方法（复制粘贴直接使用）

1、单行文字溢出显示省略号

<style>
        div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* 如果文字显示不开，则默认自动换行 */
            /* white-space: normal; */
            /* 单行溢出文字显示省略号三部曲 */
            /* 1.如果文字显示不开，也必须强制一行内显示*/
            white-space: nowrap;
            /* 2.溢出的部分隐藏起来 */
            overflow: hidden;
            /* 3.文字溢出的时候用省略号来显示 */
            text-overflow: ellipsis;
        }
</style>

需要复制粘贴的代码如下：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

2、多行文字溢出显示省略号

<style>
        div {
            width: 150px;
            height: 65px;
            background-color: pink;
            margin: 100px auto;
            /* 多行溢出文字显示省略号五部曲 */
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数  3表示在第三行显示省略号*/
            -webkit-line-clamp: 3;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
</style>

需要复制粘贴的代码如下：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;