使行中三个元素的中间填充剩余 space

Question

我需要三个元素。两侧各有两个元素，中间有一个文本元素。中间的文本需要left-aligned（浮动）到第一个元素。

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

如果宽度无法容纳所有元素，

## This is sample text! ## 将变成 ## 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。这样可以删除所有浮动，并保持文档流不变。

希望对您有所帮助。

.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>

Answer 2

这可以通过使用引导网格和 CSS 溢出和文本溢出属性轻松完成。您需要 link bootstrap 文件头部 .

看看这个。

.ellipsis {
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

  <div class="container-fluid">
    <div class="row">
        <div class="col-md-4 col-xs-3">
          <div>Hello Hello</div>
        </div>
        <div class="col-md-4 col-xs-6">
          <div class="ellipsis">Hello Hello Hello Hello Hello Hello </div>
        </div>
        <div class="col-md-4 col-xs-3">
          <div>Hello Hello</div>
        </div>
    </div>
  </div>

使行中三个元素的中间填充剩余 space

Make middle of three elements in row fill remaining space

html

css

position

element