Make middle of three elements in row fill remaining space

Question

I need three elements. Two elements on either side, and one text element in the middle. The text in the middle needs to be left-aligned (floating) to the first element.

I need the text to truncate with ellipsis when the page is shrunk. But after specifying overflow styles, when the page is shrunk smaller than the width of the three combined they start moving to new positions and moving out of the parent container.

## This is sample text! ## would turn into ## This is samp... ## (where ## are the side elements) if the width could not accomodate all of the elements.

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

Note that this answer did not help because it just moves each child to its own line.

score 3 · Accepted Answer · answered Sep 23 '18 at 09:55

I am using a flexbox for the .container and set flex: 1 for .container-second. This way all floats can be removed and the document flow stays intact.

Hope this helps.

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

Even more simple than I had hoped for. Thanks. – Jacob Birkett Sep 23 '18 at 10:05 — Jacob Birkett, Sep 23 '18 at 10:05

score 0 · Answer 2 · answered Sep 23 '18 at 10:10

0

This can done easily by using bootstap grid and CSS overflow and text-overflow property. You need to link bootstrap file in head section .

Check this out.

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

answered Sep 23 '18 at 10:10

Shaiv

41
2

Bootstrap is never the answer for something that can be solved reasonably easy by other means. Bootstrap and the likes are good to make things easier when building a whole site, not to add a dependency for one problem. – Jacob Birkett Sep 23 '18 at 10:13
Yes true , But it just another way since using flex-box is already being answered. – Shaiv Sep 23 '18 at 10:18

Make middle of three elements in row fill remaining space

2 Answers2