Текст строки выполнения начальной загрузки не по центру

#css #twitter-bootstrap

Вопрос:

Я использую индикатор выполнения начальной загрузки, который отображает количество потраченных денег по сравнению с лимитом.

Бывают случаи, когда это превысит лимит, и индикатор выполнения будет просто заполнен.

Однако, когда он превышает его слишком сильно, вы больше не можете видеть текст поверх него, потому что он «центрирован» с прогрессом баров, который находится вне div.

Работает как обычно:

   <div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
    50%
  </div>
</div>

Текст больше не отображается на панели, поскольку он превышает div

 <div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="200" aria-valuemin="0" aria-valuemax="100" style="width: 200%;">
    200%
  </div>
</div>

Скрипка http://jsfiddle.net/E9chu /

Я надеюсь, что я могу сказать, превышает ли он максимальное значение (я могу указать это), затем установите класс, в blah который указывает тексту теперь центрироваться в progress div, а не в progress-bar div

1. Рассматривали ли вы возможность использования тега HTML5 meter ? Я думаю, что это лучше всего подходит для вашей проблемы.

2. Спасибо за предложение, но я бы предпочел остаться с тем, что у меня есть, если нужно. Необходимость поддержки старых браузеров :/

3. Я слышу вас … тогда ниже мой ответ.

Ответ №1:

Добавьте это правило в свой CSS:

 .progress-bar {
    max-width: 100%;
}