Flex 布局子元素文本超长省略号显示

bg2015071002.png
基本结构

<div class="main">
    <div class="content">
        <h4 class="name">Words</h4>
    </div>
    <div class="content">
         <h4 class="name">Words Words Words Words Words</h4>
    </div>
    <div class="content">
         <h4 class="name">Words</h4>
    </div>
</div>
.main {
    display: flex;
}
.content {
    flex: 1;
}

为了使 h4 标签中的文本不超过容器,使用省略号显示,常规想法基本添加相应的样式

.content > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

但仅仅这样是不够的,无法达到目标,为什么呢?
如果不设置宽度, .content 可以被子节点无限撑开;因此 h4 标签 总有足够的宽度在一行内显示所有文本,也就不能触发截断省略的效果
所以需要给 .content 设置宽度;如果设置固定宽度,flex 布局的有事就没了,那怎么办呢? 经过尝试只需要设置width:0,即可达到效果

完整代码

.main {
    display: flex;
}
.content {
    width: 0;
    flex: 1;
}
.content > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

这种情况下完全会触发 截断省略的效果 而且 flex 布局的优势也没损失。


作者: 浪子
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 浪子 !
 上一篇
Element UI 菜单高亮问题 Element UI 菜单高亮问题
Element ui 菜单可以采用路由的形式或者非路由的形式,为了简单大部分都会采用路由的形式,这样只要菜单可以不用额外操作就可以跳转,高亮 。 不过在一次菜单高亮的时候却出现一个问题,路由明明是正确的,但高亮却时好时坏, 有时候高亮会跳到其他菜单,在当前菜单下刷新确实好的,切换后又不行;无赖之下只能切回非路由模式,然而问题依然存在;经过一个多小时的排查终于发现时在循环的时候菜单的 key 有问
2020年4月2日
下一篇 
React Router v4 & v5 拦截器(钩子)、静态路由、route-view 实现 React Router v4 & v5 拦截器(钩子)、静态路由、route-view 实现
扩展react-router,实现钩子函数(路由守卫)功能,实现静态路由渲染功能,提供类似vue-router中的route-view快速渲染路由的功能。
2020年4月3日