flex布局中textoverflow失效的解决方案

41次阅读

共计 648 个字符,预计需要花费 2 分钟才能阅读完成。

flex 布局中 text-overflow 生效

在开发中咱们常常会遇到这种布局,要求文字垂直居中,且超出应用省略号

说到垂直居中,兼容性最好的就是 flex 布局,但在 flex 布局下呈现了 text-overflow 生效的状况

实例代码

<div class="wrapper">
   <div class="flex item">hahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</div>
</div>
.flex{
    display: flex;
    align-items: center;
}
.item{
    height: 40px;
    background-color: bisque;
    overflow: hidden;
    text-overflow: ellipsis;
}

呈现了如下成果,咱们能够看出 over-flow 属性是失效的,而 text-overflow 却生效了

解决方案

计划一

在文本里面再多包装一层 div 元素

<div class="wrapper">
        <div class="flex item">
            <div class="item-con">hahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</div>
        </div>
</div>
.flex{
    display: flex;
    align-items: center;
}
.item{
    height: 40px;
    background-color: bisque;
}
.item-con{
    overflow: hidden;
    text-overflow: ellipsis;
}

正文完
 0