Ensuring sleek alignment in CSS flexbox by eliminating additional horizontal space caused by multi-line text

Incorporating bootstrap 4.6 and flexbox into my design, I am facing an issue with a horizontal line not filling the space between two other div elements.

When the text is short, everything aligns as expected. However, when the text extends to two lines, there is extra space and insufficient room for the line to display properly.

How can I resolve this problem?

https://i.sstatic.net/3Wtr6.jpg

.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>
htmlcssbootstrap-4flexbox

Answer №1

To ensure that the text fills up the remaining space after a break, consider using the text-justify attribute. If you want to maintain the center line visibility, it is recommended to set an explicit width for the text containers. This prevents them from resizing based on the content and window size. For more information, refer to: 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 lines to display</h1>
  </div>

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

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

Answer №2

To make the text fill all available space, simply add the Bootstrap-class text-justify to the desired element:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The body background position center does not function properly in Internet Explorer

I'm currently working on a website and facing some issues with the background-position property in CSS. Here is the code snippet that's giving me trouble: body { background-color: Black; background-image: url(images/background_ui.png); backg ...

htmlcssbrowser

table: column with percentage-based width AND a minimum width in pixels

Here is an example I'm working with: https://stackblitz.com/edit/js-ivvupc?file=index.html I need my table to be responsive, meaning it should become scrollable when the window size is reduced. The basic setup for this is already in place within the ...

htmlcsshtml-tableresponsive

Generating dynamic HTML content in React using a variable within a string

Currently, I am utilizing TypeScript in a React application. I am receiving the following data from an API: a) a list of variable names ["name", "surname"] b) several strings in simple HTML form with variables "<p>Hello, ho ...

javascripthtmlreactjs

How can I remove the popover parents when clicking the confirm button using jQuery?

I am having trouble sending an AJAX request and removing the parent of a popover after the request is successful. I can't seem to access the parent of the popover in order to remove it, which is causing me some frustration. // Code for deleting w ...

javascripthtmljquery

Block entry to HTML files unless the user has logged in utilizing PHP sessions

I have been working on implementing a verification process to check if a user is logged in when accessing a specific HTML file. When a user tries to access something.html without being logged in, I would like to redirect them to index.php and restrict acc ...

phphtmlsession

Struggling with overlaying Bootstrap modals on top of each other

This idea is inspired by the topic Multiple modals overlay I am working on developing a folder modal that allows users to either 1) open an existing file or 2) create a new file within each folder modal. To see how it functions, please run the code below ...

javascripthtmljquerycssbootstrap-5

The hover effect does not seem to be functioning properly within the <th>

I've been working on a tooltip feature that displays data in a message box when hovering over an icon based on its attribute. The following code is implemented for the mouseenter event. <span class='csTip fa fa-info-circle' csTipTerm=&a ...

jquerycssmodel-view-controller

Execute a sudo command using an html button

Looking for a way to create a simple website with HTML buttons on my Raspberry Pi that can execute sudo commands. I attempted the following method: <?php if (isset($_POST['button'])) { exec('sudo reboot'); } ?> ...

phphtmllinuxraspberry-pi

The links are displaying on separate lines instead of being inline

There is a tags section on the blog detail page. The html code for it is as follows: <td class="tags"> <a href="">tag1></a>, <a href="">tag2</a> </td> However, the tags are appearing on separate lines instead of in ...

htmlcss

Challenges with personalized music player

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/CSS"> #custom{ font-family: monospace; font-size: 16px; max-width: 650px; ...

javascriptcsshtmlaudio

Switching over from an external style sheet to inline elements can be tricky, especially when it comes to integrating "dropdown" styles properly

I successfully created a stylish menu using a specific style sheet, but now I'm facing issues when trying to incorporate this menu into web pages with different style requirements. Realizing that loading the style sheet onto these new pages wreaks hav ...

htmlcssinlinestylesheet

WordPress does not allow self-referencing within the same site

I am currently working on a wordpress site and I am trying to create a link that directs to a specific section on the same page. This is the code I am using: <a href="#offer" target="_self">test</a> And here is the code for the landing secti ...

htmlwordpress

My goal is to generate a collection of fullwidth ion-cards using data from an array of objects

I am attempting to iterate through an array of objects in order to generate a set of cards, either FULLWIDTH or halfwidth with the last one centered if the count is an odd number. I have created a component that contains the card layout and I am using *ng ...

cssangularionic-framework

Material-UI LeftNav with a sticky header

I attempted to create a fixed header, specifically a Toolbar, inside a LeftNav so that when the LeftNav is scrolled, the Toolbar remains in place. However, for some reason, setting position: 'fixed' on the Toolbar does not work within the LeftNav ...

cssmaterial-ui

Describe the CSS that targets pseudo-elements on an individual element

Perhaps a Repetition: CSS Pseudo-classes with inline styles Could an example like this work... <span style="this:hover{color:blue}">Changes color to blue when hovered</span> ...be doable? ...

cssinlineelementthis

Is there a way to set the default state of a checkbox in a spring-form?

I have set up my web content using spring-boot with .jsp files. The controller code is as follows: @Slf4j @Controller @AllArgsConstructor @SessionAttributes({"language", "amount", "words"}) public class LanguageController { private LanguageService lang ...

javascriptjavahtmlspringspring-form

Is there a way for me to modify how columns are positioned in Bootstrap?

I am seeking a method to alter the display of a row containing eight col-md-6 divs in a unique manner. Default Bootstrap arrangement: https://i.sstatic.net/pMd33.png Desired arrangement: https://i.sstatic.net/iDM2f.png The number of columns is flexibl ...

flexboxbootstrap-4smarty

In Internet Explorer 8, the functionalities of jquery animate() and slideUp() are not functioning properly

When it comes to animating the rows of a table using jQuery, I encountered an issue with IE8. While the animation works smoothly in FF, Safari, and Chrome, it fails to function in IE8 without showing any error messages for debugging purposes. To work arou ...

javascriptjqueryhtml

CSS Hover Effects on Navigation Bar Not Displaying as Expected

I was aiming to make one of my Navbar tabs stand out by having a different appearance compared to the others. However, there seems to be an issue with the text color for this particular tab in the hover state - it works inconsistently across different brow ...

htmlcsstwitter-bootstrap

Adding hyperlinks to images on a Project Page in Squarespace with the help of JQuery

I'm currently creating a website on Squarespace and facing a challenge with the project pages. While Squarespace allows me to add images with titles and descriptions, I do not have direct access to edit the page. Unfortunately, the platform does not h ...

javascriptjqueryhtmlclasssquarespace