Twitter Bootstrap：標籤在堆疊進度條中被切斷

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的文字，暫時保存在另一股利和獲取文本寬度。最後，您可以爲每個進度條指定最小寬度。

Answer 2

我建議看看這個CSS3文本overflow屬性

CSS3 text-overflow Property

可能來得心應手