多行或者单行文本超出两行显示点点点,如果保证…

2018-11-28 08:50:58来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:地区picker 各选择器,优劣分析

下一篇:第一章 初始HTML5