CSS 文本超出显示三个点，可配置超出多少行才显示

实现

超出1行的部分隐藏并显示三个点

            p {
                overflow:hidden;
                display:-webkit-box;
                -webkit-box-orient:vertical;
                -webkit-line-clamp:1;/* 超出多少行才显示三个点，1:表示超出1行就显示 */
            }
        

超出多行

超出多行仅需将 -webkit-line-clamp 的值改为你需要的行数，例如超出 3 行隐藏并显示三个点 -webkit-line-clamp:3;

使用 Scss 封装函数，可传入超出行数

            /**
            * 限制文本最大显示行数
            * @param {Object} $line_num 超出行数
            */
            @mixin max-line($line_num) {
                overflow:hidden;
                display:-webkit-box;
                -webkit-box-orient:vertical;
                -webkit-line-clamp:$line_num;/* 超出行数 */
            }
        

使用方式：

例如：标签 <p class="info"> 内容超出两行显示三个点

            p.info{
                @include max-line(2);
            }
        

高度问题

例如：我们想要使用 flex 布局实现图文左右排列，文字超出1行显示三个点，效果如下所示：

标题：一段很长的文本，超出一行的部分将会被隐藏并显示为三个点

实现代码：

            <div class="box">
                <img class="icon"/>
                <div class="title">
                    标题：一段很长的文本，
                    超出一行的部分将会被隐藏
                    并显示为三个点
                </div>
            </div>
        

            .box{
                height:60px;
                width:300px;
                background:#eee;
                display:flex;
            }
            .box .icon {
                width:60px;
                height:60px;
            }
            .box .title {
                flex:1;
                overflow:hidden;
                display:-webkit-box;
                -webkit-box-orient:vertical;
                -webkit-line-clamp:1;
            }
        

显示结果：

标题：一段很长的文本，超出一行的部分将会被隐藏并显示为三个点

虽然第1行超出部分显示了三个点，但第2行却也显示出来了，原因是 flex 布局的默认 align-items:stretch 设置把高度自动撑满

解决方案：

我们在文本上再套一层 <div class="text">，整体代码如下：

            <div class="box">
                <img class="icon"/>
                <div class="title">
                    <!-- 再套一层 div -->
                    <div class="text">
                        标题：一段很长的文本，
                        超出一行的部分将会被隐藏
                        并显示为三个点
                    </div>
                </div>
            </div>
        

            .box{
                display:flex;
                height:30px;
                width:100px;
                background:#eee;
            }
            .box .icon {
                width:60px;
                height:60px;
            }
            .box .title{
                flex:1;
            }
            .box .title .text {
                /* 超出显示三个点 */
                overflow:hidden;
                display:-webkit-box;
                -webkit-box-orient:vertical;
                -webkit-line-clamp:1;
            }