Question

我需要三个要素。两侧分别有两个元素，中间有一个文本元素。中间的文本需要左对齐（浮动）到第一个元素。

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

如果宽度不能容纳所有元素，则

## 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并没有帮助，因为它只是将每个孩子移到自己的行上。

Answer 1

我正在为.container使用一个flexbox，并为flex: 1设置.container-second。这样，所有浮子都可以去除，文档流保持完整。

希望这会有所帮助。

.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溢出和文本溢出属性轻松完成。您需要在头部链接引导文件。

签出。

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

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

2 个答案: