Twitter Загрузочный лоток: ярлык отключен в стеке сложения в стопке

Question

Моя проблема в том, что я использую штабелированный индикатор выполнения, а разделы слишком маленькие, чтобы отрезать текст внутри. Использование min-with с разрывом индикатора выполнения. Есть ли способ решить проблему?

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

Answer 1

У меня есть немного Jquery обходной путь для вас:

Jquery

$.fn.textWidth = function() { 
     var html_org = $(this).html(); 
     var html_calc = '<span>' + html_org + '</span>'; 
     $(this).html(html_calc); 
     var width = $(this).find('span:first').width(); 
     $(this).html(html_org); 
     return width; 
    } 
    var progress = $(".show"); 

    progress.each(function() { 

     $("#tempDiv").text($(this).text()); 
     var textW = $("#tempDiv").textWidth(); 

     $("#tempDiv").text(""); 
     $(this).css({ 
      "min-width": textW + "px" 
     }); 

    }); 

HTML

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

Получить текст с Jquery, сохранить его во времени в другой DIV и получить текст ширину. В конце вы можете дать каждому шагу прогресса минимальную ширину.

Answer 2

Я хотел бы предложить взглянуть на этот CSS3 текст переполнения собственности

CSS3 text-overflow Property

может пригодиться