html - 如何使省略号在具有动态宽度的 flex 元素上工作( flex :1)?

Question

我正在尝试在 flex:1; div 上实现 white-space: nowrap; 和 text-overflow: ellipsis;无需设置 max-width。我希望它适应 flex:1 给出的宽度。

这是一个 fiddle ，它解释了我想要什么以及实际发生了什么: https://jsfiddle.net/dani3l/6y04bvu1/13/

我只想在可能的情况下保留解决方案的 CSS。

提前致谢!

Answer 1

你可以在你的 flex:1 类中尝试这个:

.flex-1, .flex-1 > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这是一个片段来展示这一点。

.flex-container {
  display: flex;
  align-items: center;
  height: 50px;
  width: 120px;
  padding: 0 10px;
  background-color: black;
}

.flex-1 {
  flex: 1;
  color: white;
}

.flex-1, .flex-1 > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="flex-container">
  <div class="flex-1">
    This is very long text.
  </div>
</div>


<br>
<br>

<div class="flex-container">
  <div class="flex-1">
    <div>
      Child divs work too
    </div>
    <br />
    <span>
      Child spans work too
    </span>
  </div>
</div>

我找到了 Larry Gordon's Codepen这对我有帮助。