快速导航

Flex 布局实现单行文本省略号

Flex 布局下实现单行文本溢出时出现省略号和非 Flex 布局实现略有差别

HTML

<div class="flex-wrap">
  <div class="left"></div>
  <div class="right">
    <div class="right-son">flex布局下CSS设置省略号的解决方法</div>
  </div>
</div>

CSS

这里主要有问题的不是right元素，而是right的子元素，但解决问题的途径是从right元素入手的

解决方案：在right类中添加width: 0

.flex-wrap {
  display: flex;
  width: 100%;
  height: 100px;
}
.left {
  flex: 0 0 60px;
}
.right {
  flex: 1;
  width: 0;
}
.right-son {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}