skip to Main Content

My problem is when i use a stacked progress bar and the sections are too small the text inside is cut of.
Using the min-with breaks the progress bar.
Is there a way to solve the problem?

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" style="width:1%;">
    <span style="color:black">Long long text</span>
  <div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" style="width:99%;">
    <span style="color:black">Long long text</span>



  1. I would suggest have a look at this css3 text-overflow property

    CSS3 text-overflow Property

    might come handy

    Login or Signup to reply.
  2. I have a little Jquery workaround for you:


    $.fn.textWidth = function () {
            var html_org = $(this).html();
            var html_calc = '<span>' + html_org + '</span>';
            var width = $(this).find('span:first').width();
            return width;
        var progress = $(".show");
        progress.each(function () {
            var textW = $("#tempDiv").textWidth();
                "min-width": textW + "px"


    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width: 5%;">
            <span class="show" style="color:black; position: relative">test</span>
    <div class="progress-bar progress-bar-danger" style="width:95%;">
        <span class="show" style="color:black; position: relative">test 1</span>
    </div><div id="tempDiv"></div>

    Get the Text with Jquery, save it temporally in another div and get the Text-width. At the end you can give every progress-bar the min-width.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top