Выравнивание 3 текстов (слева, по центру и справа) в DIV

Question

Я пытаюсь сделать своего рода индикатор выполнения, который будет заполнен, с текстом внутри, который находится слева, в центре и ИНОГДА - справа.

Я понял, что это (почти) работает, моя единственная проблема в том, что иногда текст посередине становится слишком длинным, и поэтому он выходит из div. Это означает, что он оборачивается и занимает две строки, но в главном div все еще есть место.

Это код, может быть, кто-то может помочь мне исправить это и немного улучшить:

<div class="progress progressSize">
    <div style="width: 50%;" class="progressFill"></div>
    <div class="progressText">
        <span class="leftText">Left Text</span>
        <span class="centerText">Center text that gets too long</span>
        <span class="rightText">Right Text</span>
    </div>
</div>

А для CSS:

.progress {
    border: 1px solid #004b91;  
    background-color: #FFFFFF;
    position: relative;
}

.progressSize {
    width: 500px;
    height: 20px;
}

.progressFill {
    background-color: #EAF3FE;
    height: 100%;
    position: absolute;
}

.progressText {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    position: relative;
}

.leftText {
    float: left;
    width: 33%;
}

.centerText {
    float: left;
    text-align: center;
    width: 33%;
}

.rightText {
    float: right;
    text-align: right;
}

Так что моя проблема связана с centerText. Текст посередине слишком большой, поэтому он занимает 2 строки, но он недостаточно велик, чтобы заполнить всю строку. Поскольку я оставляю за собой 33% для каждого: левого, центрального и правого текста, центральный текст помещается посередине, но имеет вид «границы».

Я не уверен, как это исправить. Может ли кто-нибудь помочь мне?

Спасибо,

Rudy

Answer 1

Ваш CSS для procressSize должен быть:

.progressSize {
    width: 500px;
    min-height:20px;
    height: auto;
    overflow:auto;
}

Это увеличит высоту элемента div, содержащего текст

Правка, но если вы хотите, чтобы высота div оставалась неизменнойне используйте ширину: 33% для div centerText и сохраняйте CSS progressSize так, как я упомянул

.progressSize {
    width: 500px;
    min-height:20px;
    height: auto;
    overflow:auto;
}

.centerText {
    float: left;
    text-align: center;
    min-width: 33%; // initially, width:33%
    height:auto;
}

Минимальная ширина - это просто минимальная ширина, чтобы div не уменьшался ниже33% (но это не будет работать в IE6)

Answer 2

Альтернативой использованию float для этой проблемы является использование абсолютного и относительного позиционирования, я обнаружил - я нахожусь в ситуации, когда мне нужно сделать это без float, и это помогло мне решить мою проблему.

http://www.bennadel.com/blog/2541-most-css-floats-can-be-replaced-with-relative-and-absolute-positioning.htm

Answer 3

Может быть overflow:hidden в сочетании с height:1em поможет? Это обрезает слишком длинный текст.

.centerText {
  float: left;
  text-align: center;
  width: 33%;
  overflow:hidden;
  height: 1em;
}