Эллипсис переполнения текста на одном из двух пролетов внутри обертки

У меня проблема с многоточием. Вот мой HTML:

<div id="wrapper">
    <span id="firstText">This text should be effected by ellipsis</span>
    <span id="lastText">this text should not change size</span>
</div>

Есть ли способ сделать это с помощью чистого css? Вот что я пробовал:

#firstText
{
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

#lastText
{
    white-space:nowrap;
    overflow:visible;   
}

Вот как это показано:

Этот текст должен быть выполнен эллипсисом этого текста shoul

Пока это результат, я хочу:

Этот текст должен быть e... этот текст не должен изменять размер

Ответ 1

Вы можете передать width вашему #firstText следующим образом:

#firstText
{
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:150px;
    display:inline-block;
}

Проверьте этот пример

http://jsfiddle.net/Qhdaz/5/

Ответ 2

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

#firstText
{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#lastText
{
    float:right;
    white-space:nowrap;
}

<div id="wrapper">
    <span id="lastText">this text should not change size</span>
    <span id="firstText">This text should be effected by ellipsis</span>
</div>

Ответ 3

Там все еще маленький случай не обрабатывается:

Если у вас есть неизвестный или динамический размер обертки, и вы хотите, чтобы первый ребенок занимал все свободное пространство, но многоточие, если он еще слишком длинный.

Вот мое решение, использующее свойства flex CSS:

#wrapper{
    display: inline-flex;
    flex-flow:row nowrap;
    max-width:100%; /* or width:100% if you want the spans to take all available space */
}
#firstText{
    flex:1;
    white-space:pre;
    overflow: hidden;
    text-overflow: ellipsis;
}
#lastText{
    white-space:nowrap;
}

Ответ 4

Вы можете подделать его так: измените свой span на div и измените свой CSS:

#firstText
{
    float: left;
    width: 250px;
    height: 20px;
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

#lastText
{
    float: left;
    white-space:nowrap;
    overflow:visible;   
}