Текст-макет разбит

Question

Вот jsfiddle.

Проблема, которую вы увидите на скрипке на втором «разделителе», текст сломан, если текст слишком длинный.
Даже с переливом и текстового переполнения это не помогает:

CSS:

.seperatorLabel { 
    vertical-align: middle; 
    display: inline-block; 
    height: 22px; 
    line-height: 22px; 
    overflow:hidden; 
    text-overflow:ellipsis; 
} 

HTML:

<div class="formSeparatorCon"> 
    <div id="sep1" class="formSeparator"> 
     <div class="arrow"></div> 
     <div class="seperatorLabel">Prüfung</div> 
    </div> 
</div> 

Answer 1

Указать ширину контейнера. Он не знает, где переполненный старт, потому что он считает ширину равной 100%. Укажите ширину в пикселях. Как следующий код будет работать:

.seperatorLabel { 
    vertical-align: middle; 
    display: inline-block; 
    height: 22px; 
    line-height: 22px; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    width: 200px; 
} 

Answer 2

после отредактируйте .arrow позиции к абсолютному и удалить дисплей (с правильными левым и верхним позиционированием) и все контейнеры с добавлением макс-шириной: 100% кажется работать правильно. с небольшой помощью calc() кажется, что он идеально подходит.

результат: http://jsfiddle.net/bergi9/33x6asvk/2/

без комментариев Brewal с max-width я не имел бы этот результат