用户可以更改容器的宽度,它可以短于两个容器所需的空间。如果发生这种情况,我需要先收缩容器。这里的预期结果是:“第一个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/