【笔记】css基于box的一行时垂直方向居中，多行平均居中，多出部分还省略号代替

题目很长，其实他就是这样的：

看标题，一行的时候是这样的，在行中间

 

标题文字多的时候是这样的，变成2行，超出部分用省略号：

 

但是为了更好的兼容性，没有使用flex，使用的是box布局。

核心代码就是这样的：

 

 html：

<div class="user-name">在这里写一大堆文字</div>

 

 css：

.user-name{
          width:60%;
          height:60px;
          line-height: 30px;
          overflow:hidden;
          text-overflow: ellipsis;
          word-break:break-all;
          font-weight: bold;
          display: -webkit-box; 
          display: box; 
          -webkit-line-clamp: 2; 
          -webkit-box-orient: vertical; 
          -webkit-box-pack:center;
          /* 下面这两句用不到 */
          border: solid 1px deeppink;
          margin-top:10px;
        }

注意，这个line-height是必须加的，不加的话文字多的时候会出现更多行。

这个方法的缺点就是ie8及以下版本是不支持的，如果大家有好的方法希望不吝赐教~~