多行或者单行文本超出两行显示点点点,如果保证内容始终垂直居中?
程序员文章站
2022-10-19 23:46:25
我现在的需求是这样的,我目前实现了一个div框,显示文字,超出两行显示...,如果单行要保证垂直居中,我如果给容器使用display:flex;align-items:center;则当文字内容过多的时候会不上下文字有截断; 现在效果如下: 解决方法: display:flex;垂直居中的是里面元素 ......
我现在的需求是这样的,我目前实现了一个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; } }