ruby-on-rails-4 - tutorial - ruby on rails教程第4版



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

我有一个rails应用程序,我使用Bootstrap的样式。 我使用引导程序3显示引导程序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上找到了很多参考资料,并且尝试过他们都没有工作。 最小宽度的解决方案对我来说是行不通的,因为要显示的文本数量大于可以以最小宽度容纳的数量。

在此先感谢您的时间。


将#{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;
}

请注意支持文本 - 阴影属性的最新浏览器。

文字阴影属性参考http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

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





progress-bar