关于文本省略添加省略号这件小事儿

文字省略大致分为单行省略加省略号,多行省略加省略号:

首先是单行省略,主要思想就是1.不换行 2.超出部分隐藏 3.加省略号

/* 单行文字 */
        .p1{
            width: 100%;
            line-height: center;
            border-bottom: 1px solid #000;
            /* 让文字在一行显示,不换行*/
            white-space: nowrap;
            /* 文本超出部分隐藏 */
            overflow: hidden;
            /* 超出部分添加省略号*/
            text-overflow: ellipsis;
        }

其次是多行省略 ,主要思想是:1.将盒子变为弹性伸缩的盒子 2.超出隐藏 3.限制文本显示的行数(根据个人实际情况定行数) 4.设置盒子的排序方式 5.加省略号

 /* 多行文字 */
        .p2{
            width: 100%;
            border-bottom: 1px solid #000;
            /* 将p2这个对象作为一个弹性伸缩的盒子模型 */
            display: -webkit-box;
            /* 文本超出部分隐藏 */
            overflow: hidden;
            /* 限制块级元素内文本显示的行数 */
            -webkit-line-clamp: 3;
            /* 设置盒子内子元素的排列方式 */
            -webkit-box-orient: vertical;
            /* 超出部分添加省略号 */
            text-overflow: ellipsis;
        }