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

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;}