我现在的需求是这样的，我目前实现了一个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/post/7828.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知