正文

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

IP云
IP云V管理员/7 阅读
11/28
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

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

标题文字多的时候是这样的，变成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:;

          -webkit-box-orient: vertical;

          -webkit-box-pack:center;

          /* 下面这两句用不到 */

          border: solid 1px deeppink;

          margin-top:10px;

        }

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

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

相关阅读

目录[+]