html - CSS创建一个div，当另一个同级div与它的内容一样宽时，该div占用父级的剩余宽度？

Question

如何创建下一个布局:

两个 div 共享公共(public)父级的宽度。它们都在一行中显示文本内容，而 -

• 右侧的 div 与文本内容一样宽
• 左侧的 div 占据了父级的所有剩余宽度，并使用 text-overflow: ellipsis 在文本被剪切的位置显示“...”。

这是我认为我所知道的应该如何实现 -

.parent {
  width: 400px;
  height: 200px;
}

.left {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: none;
}

.right {
  display: inline-block;
}

<div class='parant'>
  <div class='left'> This div should display all text content possible without line-breaking and display '...' where its being cut </div>
  <div class='right'> This div is as wide as its text content </div>
</div>

它应该看起来像 this example

Answer 1

您可以使用 Flexbox 来实现此目的，只需在父元素上设置 display: flex 并在右侧元素上设置 flex-shrink: 0 即可。

.parent {
  width: 400px;
  height: 200px;
  display: flex;
}
.left {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background: red;
}
.right {
  background: lightblue;
  flex-shrink: 0;
}

<div class='parent'>
  <div class='left'> This div should display all text content possible without line-breaking and display '...' where its being cut </div>
  <div class='right'> This div is as wide as its text content </div>
</div>