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
<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>
Problem :
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.
<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>
Comments
Comment posted by Simon Mo
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.
Comment posted by AStombaugh
@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.