兩種情況：

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; // 行高最好是設置為行間距的整數(shù)倍
            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;
    }