Question

我有这个简单的模板：

HTML：

＆＃13;

.outer {
  display: flex;
  width: 200px;
}

.inner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

＆＃13;

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

＆＃13;

显示的结果类似于The quick b... jumps over th...

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

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

谢谢！

Answer 1

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

来完成此操作

.left {
  flex-shrink: 0;
}