Bootstrap 3 中的进度条文本被截断

Question

我有一个 Rails 应用程序，我在其中使用 Bootstrap 进行样式设置。我使用 bootstrap 3 在 bootstrap 3 进度条中显示完成百分比以及任务状态。如果进度条填满了栏的大部分宽度，则栏内的文本显示正常。但是，对于较低的百分比，文本会被截断。请参阅随附的屏幕截图。

Rails 代码渲染进度条相当简单。这是为了完整性：

  def progress_bar(todate_units, total_units, completion_date, checkpoint_status)
    if (total_units.nil? || (total_units == 0) || completion_date.blank?)
      return ""
    end
    # compute percent complete
    todate_units = (todate_units.nil? ? 0 : todate_units)
    if (checkpoint_status.present? && (checkpoint_status == 'QC Complete'))
      percent_complete = 100
    else
      percent_complete = ((todate_units / total_units.to_f) * 0.8).round(2) * 100
    end
    # determine status
    if (checkpoint_status.present? && (checkpoint_status == 'QC Complete'))
      status = 'QC Complete'
    elsif (todate_units == 0)
      status = "Pending"
    elsif ((todate_units > 0) and (todate_units < total_units))
      status = "Active"
    elsif (todate_units == total_units)
      status = "Testing Complete"
    else
      status = "Unknown"
    end
    show_text = "#{percent_complete} % - #{status}"
    d = Date.today()
    if (completion_date < d)
      which_bar = (status == 'QC Complete') ? "progress-bar-success" : "progress-bar-danger"
    elsif ((completion_date >= d.beginning_of_week) and (completion_date <= d.end_of_week))
      which_bar = (status == 'QC Complete') ? "progress-bar-success" : "progress-bar-warning"
    elsif (completion_date > d.end_of_week)
      which_bar = "progress-bar-success"
    else
      which_bar = (status == 'QC Complete') ? "progress-bar-success" : "progress-bar-danger"
    end

    ret_str = "<div class='progress'><div class='progress-bar #{which_bar}' role = 'progressbar' " + 
              "aria-valuenow='#{percent_complete}' aria-valuemin='0' aria-valuemax='100' " +
              "style='width: #{percent_complete}%;'>#{show_text}</div></div>"
    ret_str
  end

请告知如何使截断的文本可见。第二条显示 48.0 % - 实际上是 48.0 % - 活动。

由于某种原因，剩余的文本不可见。另请注意，我不介意更改背景颜色或文本颜色（例如黑色）以使文本可见。唯一的限制是显示的绿色必须是绿色。进度条模拟交通灯模式（绿色/黄色/红色），以显示任务是否在完成时间内、即将完成或已超过截止日期。

我在 Google 上找到了许多参考资料并尝试了它们，但都没有奏效。 min-width 解决方案对我不起作用，因为要显示的文本量超过了 min-width 所能容纳的数量。

提前感谢您的宝贵时间。

Answer 1

将 #{show_text} 放在 span 标签内，如

ret_str = "<div class='progress'><div class='progress-bar #{which_bar}' role = 'progressbar' " + 
              "aria-valuenow='#{percent_complete}' aria-valuemin='0' aria-valuemax='100' " +
              "style='width: #{percent_complete}%;'><span>#{show_text}</span></div></div>"

然后添加下面的样式

.progress-bar span
{
position: absolute;
text-shadow: 1px 1px 3px black;
}

请注意支持 text-shadow 属性的最新浏览器。

text-shadow 属性的参考 http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

您可能想要更改 span 标签内的文本颜色