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％ - 活跃。

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

我在谷歌上找到了一些参考资料并试用了它们，但没有一个有效。最小宽度解决方案对我来说不起作用，因为要显示的文本数量超过了最小宽度。

提前感谢您的时间。

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标记内文本的颜色

Bootstrap 3中的进度条文本中断

1 个答案: