文字对齐和单行多行溢出省略

 ###  奇葩文字对齐，其实是和after元素对齐
  .span1{
        display: inline-block;
        width: 5em;
        text-align: justify;
        line-height: 20px;
        height: 20px;
        overflow: hidden;
    }
    .span1::after{
        content: '';
        display: inline-block;
        width: 100%;
    }

单行文字超出省略

    .p1{
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

多行文字超出省略

    .p2{
        width: 200px;
        display: -webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }