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

我建议看看这个 css3 text-overflow 属性

CSS3 text-overflow Property

可能会派上用场

Answer 2

我有一些 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 中并获取文本宽度。最后，您可以为每个进度条指定最小宽度。

Twitter Bootstrap：堆叠进度条中的标签被截断

Twitter Bootstrap: Label cut off in stacked progress bar

css

twitter-bootstrap

progress-bar