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