CSS：如何在容器中收缩第一个div，而不是在容器外部 [英] CSS: How to shrink first div in container instead of going outside of container

问题描述

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

 < div class =container> 
< div class =first>第一个div内容< / div> 
< div class =second>第二个div内容< / div> 
< / div> 
  

解决方案

您可以使用flexbox：

  .container {background-color：gray;显示：flex; justify-content：空格; overflow-x：hidden; white-space：nowrap} .first {overflow：hidden; text-overflow：ellipsis;}  

 < div class = container> < div class =first>第一个div内容< / div> < div class =second>第二个div内容< / div>< / div>  

$ b

User can change width of container, it can be shorter than space needed for both containers. What I need is shrink first container if such situation happens. Here expected result: "First div con...Second div content". Is there possible way to do it for all modern browsers? (latest Chrome, Firefox and IE 11 needed). Here html code from example "https://plnkr.co/edit/rH3ABKvFRltvAL1rXqkr?p=preview":

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

解决方案

You can use 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，而不是在容器外部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！