CSS - 省略号

两种情况：

1、只需要显示一行，超过的省略号处理

        text {
            overflow: hidden; //超出一行文字自动隐藏
            text-overflow: ellipsis; //文字隐藏后添加省略号
            white-space: nowrap; //强制不换行
            max-height: 50px; //Ie浏览器加行高
        }
 // 单行省略号
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
    display:block; //微信小程序，再多加一条

span多行显示`white-space: pre;`


// 多行省略号
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: 50px;

2、如果在多行的情况下

        text {
            height: 90rpx;
            line-height: 30rpx; // 行高最好是设置为行间距的整数倍
            display: -webkit-box;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3; // 3行后隐藏
        }

---

html使用css让文字超出部分用省略号三个点显示的方法：

image.png

    li {
        width: 300px;
        display: block;
        overflow: hidden;
        word-break: keep-all;
        white-space: nowrap;
        text-overflow: ellipsis;
    }