CSS：如何在容器中收缩第一个div而不是在容器外部（第二个容器应该在第一个之后显示） [英] CSS: How to shrink first div in container instead of going outside of container (second container should be shown just after first)

问题描述

我在这里问过类似的问题： CSS：如何收缩容器中的第一个div而不是在容器外面，但这个问题更困难：用户可以更改容器的宽度，它可以比3所需的空间更短容器。我需要的是收缩第一个容器如果这种情况发生，也是第二个容器应该显示刚刚之后。这里的预期结果：第一个div ...第二个div内容第三个div内容。有没有可能的方法来做所有的现代浏览器？ （最新的Chrome，Firefox和IE 11需要）。这里的html代码来自示例 https://plnkr.co/edit/9FGmNOHYxjtsQMUpeVfm?p=preview：

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

解决方案

从这个问题单独但从其他问题的细节，它似乎仍然似乎flexbox是解决方案描述的Oriol

  .container {background-color：gray;显示：flex; overflow-x：hidden; white-space：nowrap; justify-content：space-between;}。首先{overflow：hidden; text-overflow：ellipsis; padding-right：1em; border：1px solid red;}。third {flex：1; text-align：right; background：pink;}  

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

$ b

JSfiddle演示

I've asked similar question here: CSS: How to shrink first div in container instead of going outside of container, but this question is more difficult: User can change width of container, it can be shorter than space needed for 3 containers. What I need is shrink first container if such situation happens, also second container should be displayed just after first. Here expected result: "First div con...Second div content Third 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/9FGmNOHYxjtsQMUpeVfm?p=preview":

<div class="container">
  <div class="first">First div content</div>
  <div class="second">Second div content</div>
  <div class="third">Third div content</div>
</div>

解决方案

It's not really clear what you are asking from this question alone but from the details of the other question it still seems as though flexbox is the solution as described by Oriol

.container {
  background-color: gray;
  display: flex;
  overflow-x: hidden;
  white-space: nowrap;
  justify-content: space-between;
}
.first {
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 1em;
  border: 1px solid red;
}
.third {
  flex: 1;
  text-align: right;
  background:pink;
}

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

JSfiddle Demo

这篇关于CSS：如何在容器中收缩第一个div而不是在容器外部（第二个容器应该在第一个之后显示）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！