如何在动态宽度（flex：1）的flex项目上使用省略号？

Question

我试图在white-space: nowrap; div上实施text-overflow: ellipsis;和flex:1;而不设置max-width。我希望它调整为宽度flex:1给出。

这是一个小提琴，解释了我想要的和实际发生的事情： 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帮助了我。

Answer 2

应用文本溢出：省略号，你必须给出宽度或最大宽度，否则它不知道它需要停止的位置。