文本自动对齐和多行文本溢出省略

1、 文本对齐

实现如图这样的效果：

image.png

span内的文本是自动对齐的

代码如下：

span{
    width: 5em;    // 几个字符就写几个em
    display: inline-block;
    text-align: justify;
    overflow: hidden;
    height: 1em;
    line-height: 1;
}
 span::after{
    content: '';
    display: inline-block;
    width: 100%;
    border: 1px solid red;
}

二、多行文本溢出部分做省略（号）处理

如果有一行文本需要做溢出省略处理，可以直接使用 text-overflow:elipsis;来实现
多行文本则需要这样的代码

div{
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
}

实现的效果如下：

image.png

看百度的多行文本溢出效果，省略号的位置不一致、且可以被选中，应该是用JS根据字符串的长度加的省略号

image.png