期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

多行或者单行文本超出两行显示省略号,如果保证内容始终垂直居中?

我现在的需求是这样的,我目前实现了一个div框,显示文字,超出两行显示...,如果单行要保证垂直居中,我如果给容器使用display:flex;align-items:center;则当文字内容过多的时候会不上下文字有截断;

现在效果如下:

.info_des {        .margin-all(10, 10, 12, 8);        display: flex;        align-items:center;        div{          .line-height(21);          .height(42);          .font-size(14);          color: #000;          letter-spacing: 0.01px;        }      }        /*只能显示两行,超出显示省略号*/  .line_clamp2{      overflow: hidden!important;      text-overflow: ellipsis!important;      -webkit-line-clamp: 2;      display: -webkit-box;      -webkit-box-orient: vertical;      white-space: normal;      word-wrap: break-word;  }
<div class="info_des">          <div class="line_clamp2">is the leading online shopping platform in is the leading online shopping platform inis the leading online shopping platform in</div></div>

解决方法:

display:flex;垂直居中的是里面元素的居中,那就给外层div一个固定高度这里是两行文字的行高,里面文字不要给高度,当有一行的时候里面的div高度就是一行的高度就会垂直居中,有两行文字的时候就会显示两行的文字,并且不影响超出显示点点点的效果;

修改后的样式:

.info_des {        .margin-all(10, 10, 12, 8);        display: flex;        align-items:center;        .height(42);        div{          .line-height(21);          .font-size(14);          color: #000;          letter-spacing: 0.01px;        }      }

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册