Question

用户可以更改容器的宽度，它可以比两个容器所需的空间短。如果发生这种情况，我需要收缩第一个容器。这里有预期的结果：“First div con ... Second div content”。是否有可能为所有现代浏览器做到这一点？（需要最新的Chrome，Firefox和IE 11）。这里是来自示例“https://plnkr.co/edit/rH3ABKvFRltvAL1rXqkr?p=preview”的html代码：

<div class="container">
  <div class="first">first div content</div>
  <div class="second">second div content</div>
</div>

Answer 1

您可以使用flexbox：

.container {
  background-color: gray;
  display: flex;
  justify-content: space-between;
  overflow-x: hidden;
  white-space: nowrap
}
.first {
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="container">
  <div class="first">first div content</div>
  <div class="second">second div content</div>
</div>

CSS：如何在容器中缩小第一个div而不是在容器之外

1 个答案: