flex布局中的文本溢出（text-overflow：ellipsis）问题

flex的文本溢出问题

使用flex布局的时候经常需要使用文本溢出，但有时候会发现文本溢出并没有效果，百度也没有明确的答案，谷歌了下，找到了一篇解释的不错的文章 The Mystery of CSS Flex Item Shrink，令人豁然开朗，可以访问外网的朋友可以去看原文，方便其他朋友，我简单翻译解释下。

css中flex item 收缩的秘密

flex布局的背景知识

flex布局为我们在不知道子元素尺寸或者子元素尺寸是动态的情况下进行布局提供了一个十分高效的方法，所以叫做flex
在flex布局中，子元素会根据剩余空间进行自动伸缩以避免溢出，尤其是在与方向无关的策略中。

子元素的收缩问题

作为前端开发，我们经常需要在文字超出容器宽度时截取文字并用省略号表示，以避免破坏UI布局的需求，这种情况在移动端尤其普遍

当文本溢出时为了截取文字显示省略号我们可以这样做：

<div class="parent">
  <div class="child">
    <p class="truncate">
      I won't shrink past my minimum intrinsic width, but I probably       should.
    </p>
  </div>
  
  <div class="child">
    <p class="truncate">
      I won't shrink past my minimum intrinsic width, but I probably  should.
    </p>
  </div>
</div>

.parent {
  display: flex;
  
  padding: 1rem;
  background: #C5EFF7;
  border: 2px solid rgba(0, 0, 0, 0.3);
  max-width: 70%;
  margin: 2rem auto;
}
.child {
  border: 6px dashed rgba(0, 0, 0, 0.3);
  margin: 5px;
}
.truncate  {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

结果

令人意外的是结果并不像我们想的那样，并且我们没有任何明显的遗漏或错误的flex样式设置
所以为什么flex item 不会忽视他们的内容尺寸进行收缩呢？

flex item的自动最小尺寸

这里我们遇到了一个flex盒子的默认设置问题
flex item的自动最小尺寸：
为了给flex item提供一个合理的默认最小尺寸，flex将flex item的min-width 和 min-height属性设置为了auto

我们可以这样理解auto：
如果flex item的overflow属性在主轴上是visible，那么它的min-size属性将被设置为自动最小尺寸，否则将会计算为0

换句话说，flex item的默认设置为
min-width： auto 水平flex布局
min-height：auto 垂直flex布局

所以我们需要注意这点，flex item在主轴方向上不会比他的内容尺寸还小，这是因为浏览器是根据内容的宽度来计算默认的min-width或者min-height的

解决方法

1. 分别显式的覆盖flex item的默认设置
   min-width:0 水平布局
   min-height：0 垂直布局
   根据上面的demo我们可以在子item上加点样式，让文本溢出正常显示

.child {
  border: 6px dashed rgba(0, 0, 0, 0.3);
  margin: 5px;
  
  min-width: 0
}

结果

2.或者，我们也可以将overflow的值设置为visible以外的其他值，如 overflow: hidden

根据flex布局的规则，只有主轴方向上overflow为visible的item上其min-width和min-height 才会被设置为auto，否则min-size属性将会设置为0

这就是为什么我们可以使用overflow：hidden 来实现同样效果的原因，因为overflow：hidden同样也会将min-size设置为0

.child {
  border: 6px dashed rgba(0, 0, 0, 0.3);
  margin: 5px;
  
  overflow: hidden
}

结果

总结

• min-width:auto和min-height：auto默认值仅当flex item的overflow属性为visible时才生效
• 元素自动计算的最小宽度或高度不会比它的内容尺寸小
• 如果overflow的值不是visible，那么min-size属性将会被设置成0
• 所以，overflow：hidden 也可以当作min-width:0或min-height：0的代替解决方案