5
Вот мой HTML:Переполненная текст загрузочном прогресс бар
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped first-bar" style="width:10%;">I want this text to overflow into the div to the right</div>
<div class="progress-bar progress-bar-success second-bar" style="width:90%;">I want this text to overflow into the div to the left</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped first-bar" style="width:90%;">I want this text to overflow into the div to the right</div>
<div class="progress-bar progress-bar-success second-bar" style="width:10%;">I want this text to overflow into the div to the left</div>
</div>
Это мой CSS:
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.first-bar {
white-space: nowrap;
position: relative;
text-align: left;
}
.second-bar {
white-space: nowrap;
text-align: right;
direction: rtl;
}
Я хочу, чтобы переполнить текст всех Div элементов в каждом progress - классифицированный div. You can see in my Fiddle here что я пытаюсь сделать и что мой CSS работает для переполнения текста левого div в правый div, но не наоборот (текст правого div в левый div). Как я могу заставить его работать наоборот? Я попытался добавить position: relative; в CSS для second-bar, но это не работает для меня, потому что тогда он разбивает первый сценарий.
Я не уверен, что это сработает. То, что вы в основном хотите сделать, это разбить модель документа на этикетки и контейнеры. Я бы реструктурировал это так, чтобы ваши ярлыки располагались над вашими индикаторами выполнения в своих контейнерах, которые не были ограничены одним и тем же. –
@JECarterII Я стараюсь избегать этого, но понимаю, что вы имеете в виду. На самом деле мне посчастливилось сделать это так, обернув содержимое внутри тегов div: https://jsfiddle.net/ohob3jd5/ Но должен быть лучший способ, я надеюсь. Спасибо за предложение, это действительно действительно! – Alexandru