我现在的需求是这样的，我目前实现了一个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

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