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

可能会派上用场

Twitter Bootstrap：标签在堆叠进度条中被切断

2 个答案: