用户可以更改容器的宽度,它可以短于两个容器所需的空间。如果发生这种情况,我需要先收缩容器。这里的预期结果是:“第一个div con ...第二个div内容”。有没有可能对所有现代浏览器执行此操作? (需要最新的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>

最佳答案

您可以使用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 - CSS:如何缩小容器中的第一个div而不是移出容器,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36483109/

10-11 09:01
查看更多