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 许可协议。转载请注明来源 浪子!
  目录