Question 61308 in Twitter Bootstrap Question posted in

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

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 ?

extra white 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">
    <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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search