html - 使行中三个元素的中间填充剩余空间

Question

我需要三个元素。两侧各有两个元素，中间有一个文本元素。中间的文本需要与第一个元素左对齐( float )。

当页面缩小时，我需要用省略号截断文本。但是在指定溢出样式之后，当页面缩小到小于这三个宽度的总和时，它们开始移动到新的位置并移出父容器。

## 这是示例文本! ## 会变成 ## This is samp... ## (其中 ## 是边元素)如果宽度不能容纳所有元素。

.container {
  height: 30px;
  background-color: #ff0000;
}

.container > .container-first {
  display: inline-block;
  background-color: #0000ff;
  width: 20px;
  height: 30px;
  float: left;
}

.container > .container-second {
  display: inline-block;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  float: left;
}

.container > .container-third {
  display: inline-block;
  background-color: #00ff00;
  width: 20px;
  height: 30px;
  float: right;
}

<div class="container">
  <div class="container-first"></div>
  <div class="container-second">This one has sample text!</div>
  <div class="container-third"></div>
</div>

请注意 this answer没有帮助，因为它只是将每个 child 移动到自己的行。

Answer 1

我正在为 .container 使用 flexbox，并为 .container-second 设置 flex: 1。这样一来，所有的 float 都可以被移除，文档流保持不变。

希望这对您有所帮助。

.container {
  height: 30px;
  background-color: #ff0000;
  display: flex;
}

.container>.container-second {
  flex: 1;
}

.container>.container-first {
  display: inline-block;
  background-color: #0000ff;
  width: 20px;
  height: 30px;
}

.container>.container-second {
  display: inline-block;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.container>.container-third {
  display: inline-block;
  background-color: #00ff00;
  width: 20px;
  height: 30px;
}

<div class="container">
  <div class="container-first"></div>
  <div class="container-second">This one has sample text!This one has sample text!This one has sample text!This one has sample text!This one has sample text!</div>
  <div class="container-third"></div>
</div>