我的问题是,当我使用堆叠式进度条时,部分太小,里面的文本被删掉了。 使用 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>
最佳答案
我为您提供了一些 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 中并获取文本宽度。最后,您可以为每个进度条指定最小宽度。
关于css - 推特 Bootstrap : Label cut off in stacked progress bar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29792619/