css多行文字溢出打点

单行文字打点溢出

.showOneRows {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

多行文字打点溢出

.showMoreRows {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; //行数
    -webkit-box-orient: vertical;
}

项目使用了bootstrap，所以宽度加在了column属性里面，又由于文本是用p标签包裹的，导致表头塌陷（标题塌陷），所以css 改为如下：

    <style>

    /* 三行文本超出显示省略号 */
    .showThreeRows{
        overflow: hidden;
    }
    .showThreeRows p{
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    </style>

效果图

lALPDgQ9rJGhgj56zQJl_613_122.png