CSS flexbox remove extra horizontal space when text takes more than one line

Question

Using bootstrap 4.6 and flexbox. I'm trying to have a horizontal line filling the space between the two other div.

When the text is short, the flex elements stops at the end of the text, as expected. But when the text takes 2 line there is an extra space, and not enough space remaining to have the line displaying.

How can I get rid of it ?

.title, .price {
  border: 1px dotted #777;
}

.line {
  border-top: 2px dotted black;
  margin: 0 20px;
  flex: 1;
  align-self: center;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="d-flex mt-5">
  <div class="title">
    <h1>Some text</h1>
  </div>

  <div class="line">
  </div>
  
  <div class="price">
    $99
  </div>
</div>

<div class="d-flex mt-5">
  <div class="title">
    <h1>Some other text that is long and takes two line to display</h1>
  </div>

  <div class="line">
  </div>
  
  <div class="price">
    $99
  </div>
</div>

AStombaugh · Answer 1 · 2022-05-12T19:33:32.777

You could use the text-justify attribute to fill the space remaining after the break. If you want the center line to show, you may want to consider adding an explicit width to the text containers so they don't resize based on the amount of text and the window size. See also: https://www.w3schools.com/cssref/css3_pr_text-justify.asp

.title,
.price {
  border: 1px dotted #777;
  text-align: justify;
  text-justify: inter-word;
}

#longerText {
  width: 500px;
}

.line {
  border-top: 2px dotted black;
  margin: 0 20px;
  flex: 1;
  align-self: center;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="d-flex mt-5">
  <div class="title">
    <h1>Some text</h1>
  </div>

  <div class="line">
  </div>

  <div class="price">
    $99
  </div>
</div>

<div class="d-flex mt-5">
  <div id="longerText" class="title">
    <h1>Some other text that is long and takes two line to display</h1>
  </div>

  <div class="line">
  </div>

  <div class="price">
    $99
  </div>
</div>

Thanks for the suggestion, but that is not exactly what I am looking for, I am expecting the middle line to fill this extra space, not the text to take more space. Actually, I'm not even sure it is possible, looks like a browser behaviour dealing with word wrap. — Simon Mo, May 12 '22 at 19:12
@SimonMo When you refer to "middle line" do you mean the dotted line? Because if so you might need to explicitly define the width of the container the text is in so it's not just auto-sizing itself. See the updated answer and let me know if that's closer to what you want. Obviously you'll have to do some formatting but the general idea is there. — AStombaugh, May 12 '22 at 19:27

score -1 · Answer 2 · answered May 12 '22 at 19:13

Add the Bootstrap-class text-justify to the element where you want the text to fill all availble space:

.title,
.price {
  border: 1px dotted #777;
}

.line {
  border-top: 2px dotted black;
  margin: 0 20px;
  flex: 1;
  align-self: center;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="d-flex mt-5">
  <div class="title">
    <h1>Some text</h1>
  </div>

  <div class="line">
  </div>

  <div class="price">
    $99
  </div>
</div>

<div class="d-flex mt-5">
  <div class="title text-justify">
    <h1>Some other text that is long and takes two line to display</h1>
  </div>

  <div class="line">
  </div>

  <div class="price">
    $99
  </div>
</div>

CSS flexbox remove extra horizontal space when text takes more than one line

2 Answers2