javascript - flex 布局 : show first element when two child elements are in the same row

Question

我有这个简单的模板:

HTML:

.outer {
  display: flex;
  width: 200px;
}

.inner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="outer">
  <div class="left inner">The quick brown fox</div>
  <div class="right inner">jumps over the lazy dog</div>
</div>

显示的结果看起来像The quick b... jumps over th...

我怎样才能让它在放入第二个元素之前尝试完全显示第一个元素？如果第一部分没有足够的空间，只需删除第二部分。

它应该看起来像 The quick brown fo...

谢谢!

Answer 1

您需要告诉 .left 它不应该收缩。您可以通过设置 flex-shrink: 0;

.left {
  flex-shrink: 0;
}

https://jsfiddle.net/abx03fpx/