Tips for creating a line break within a Bootstrap progress bar when the text exceeds the width of a div

  1. By default, the progress bar displays text inside the portion that has progress. To ensure the text does not wrap prematurely, use white-space: nowrap;

  2. How can the issue of long text within a div be resolved without using JavaScript? Is there a way to make the text wrap onto a new line without cutting off any content?

.my-case {
  width: 100px;
  background-color: black !important;
}

.fix {
  white-space: nowrap;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

Default
<div class="progress" style="width:100px">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">Some very very long text</div>
</div>

My case
<div class="progress my-case">
  <div class="progress-bar fix" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">Some very very long text</div>
</div>

cssbootstrap-4

Answer №1

To ensure the .progress-bar functions correctly, it needs to have a CSS style of position: absolute and height: 100%;. This should be contained within a parent element with the CSS position: relative (like our .progress), which has an auto height allowing the inner text/content to determine its height.

The text content should then be moved within a separate element, for example: .progress-label

.progress {
  position:relative; /* ensure this is added! */
  width: 100px;
  background-color: black !important;
  height: auto !important; /* ensure this is added! (to let text dictate height) */
}

.progress-bar { /* Additional styles */
  position: absolute;
  height: 100%;
}

.progress-label { /* additional element and CSS */
  position: relative;
  color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  <span class="progress-label">Some very very long text</span>
</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

What causes Bootstrap to cut off text in buttons?

My button text is getting truncated for some unknown reason. Here is the HTML code: <input class="btn btn-default" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit."/> And this is how it appears: https://i.sstatic.net/Sr6Z0.png I hav ...

htmlcsstwitter-bootstrap

The sidebar stays fixed in place and doesn't adapt to varying screen resolutions

Check out my website at . I have a fixed, blue sidebar on the left side of the page to ensure its content is always visible. However, I'm facing an issue with smaller resolutions like 1024x768 where some bottom content is cut off. How can I adjust the ...

javascriptjqueryhtmlcss

The edge of the 'parent' element is obscured by the :after element

I am trying to create a transparent outlined button with a shadow in the shape of the button. However, I am facing an issue where the border of the button appears behind the :after element. You can see the problem below. Adding overflow: hidden to the tog ...

htmlcss

I'm attempting to arrange the movieCards in a horizontal row, but they keep stacking up vertically instead

I have created a movie list component with different attributes in the div section to display the cards in a row. However, all the cards are currently aligned in a column. Should I use flex or grid to achieve the desired layout? If so, how can I implement ...

javascriptcssreactjsbootstrap-5flexboxgrid

Troubleshooting Firefox HTML Positioning Problem (Functioning Properly in IE and Chrome)

After implementing the code below, I encountered an issue. In IE and Chrome, when hovering over the "CODE" section, the div correctly appears at position 100 x 100. However, in Firefox, the div fails to move to the specified position. What changes should b ...

javascriptjqueryasp.nethtmlcss

I am experiencing an issue where the CSS code is not appearing in the Chrome Debugger when I inspect an element

I recently wrote some CSS code to remove default browser styles: /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } ​ /* Remove default padding */ ul[class], ol[class] { padding: 0; } ​ /* Remove default margin */ body, h ...

htmlcss

Radio button selection with table layout

I am designing a quiz template with radio buttons. However, I would like them to be stacked vertically instead of side by side. Why doesn't the <br/> tag work? I'm having trouble understanding it. Can someone assist me? Here is my code: ...

htmlcss

Emphasize Expandable Sections based on Search Term

I have been working on developing an HTML page for my company that will showcase a list of contacts in an "experts list". Currently, the list is structured using collapsible DIVs nested within each other. Additionally, the HTML page features a search func ...

javascriptjqueryhtmlcss

Addressing three visual problems with an html form input, dropdown menu, and clickable button

Currently, the output of my code looks like this: https://i.stack.imgur.com/pl5CJ.jpg The first box (squared) represents an <input>, while the second box (rectangled) is a <select>. There are several issues that I am facing: The text entered ...

javascripthtmlcssvue.js

Html content overlapping div rather than being stacked vertically

My goal is to arrange a group of divs inside another div in a vertical stack. However, I am facing an issue where the text from the last div is overlapping with the second div instead of following a proper vertical alignment where the text in the third div ...

javascripthtmlcss

Assistance needed in regards to relative positioning

I am working on a feature where the customer's shopping cart is displayed when they hover over "My Cart." I plan to achieve this effect using CSS, but I have encountered an issue with the size of .cart causing .my-cart to stretch... update The previ ...

csscross-browser

Tips for aligning input fields in a single row within an HTML card

Is there a way to arrange Quarter and Month in the same row, and Week and Date in a row below? <base target="_top"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR ...

htmlbootstrap-4

How can you easily center content vertically on a web page?

There has been plenty of back-and-forth regarding this issue, with proposed solutions ranging from pure CSS to pure HTML. Some can get quite complex, involving deeply nested divs and intricate CSS rules. I'm looking for a simple and uncomplicated answ ...

htmlcss

Adjusting div height as you scroll down the page

Hello, I am new to CSS and I have encountered an issue with setting the height of a div element to 100%. When the list on my page exceeds the size of the page, the div is no longer visible when scrolling. Do you have any ideas on how to fix this? Here is t ...

cssasp.net-mvc

Issue with dropdown menu appearing beneath specific elements in Internet Explorer versions 7 and 8

I've been encountering some troublesome issues with a website I'm working on, specifically in Internet Explorer 7/8. On certain pages, the navigation elements are getting hidden below text and images, causing confusion for me. I've attempted ...

css

Issues with Internet Explorer's scaling functionality are preventing it from operating correctly

I've utilized d3 to create a map. Its width is dynamically set based on the parent div's (with the id "map") width, and its height is calculated with a ratio of 5/9 in relation to the width. The viewBox attribute has been defined as "0 0 width he ...

javascriptjquerycsssvgd3.js

Achieving Full Height: Making one div occupy the entire height of another

Click here to see a jsfiddle example of what I'm working on. The jsfiddle above demonstrates the issue I'm facing. I am struggling to make the element with the ID #main_info fill the entire height of its parent element #main. My goal is to ensur ...

htmlcss

Make a line break occur automatically after every 7 divs are displayed

Looking to create a grid of equal height and width divs using AngularJS to form a 7x5 square: ---------------------- | | | | | | | | ---------------------- | | | | | | | | ---------------------- | | | | | | | | ---------------------- ...

htmlcssangularjs

Tips on using CSS3 without relying on images

Can the following be designed using only CSS3 without the use of images? ...

css

Using jQuery to automatically scroll to the bottom of a div when sliding down

When a user clicks on a link to slide the div down, I want it to automatically scroll to the bottom of the div. I've attempted to use scrollTo and animate methods to achieve this effect. $('html, body').animate({ scrollTop: $("#elementID") ...

javascriptjqueryhtmlcss