在開發中我們經常會遇到這種佈局，要求文字垂直居中，且超出使用省略號

說到垂直居中，相容性最好的就是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;
}