Прогресс Текст текста в Bootstrap 3 отключается

Question

У меня есть приложение для рельсов, где я использую 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 не будет работать для меня, поскольку количество отображаемого текста больше, чем может быть размещено в минимальной ширине.

Заранее благодарим за ваше время.

Answer 1

Положите # {} show_text внутри тегов как

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

вы можете изменить цвет текста внутри тегов