Добавление многоточия к первому из набора диапазонов

У меня есть что-то вроде этого:

<p id="container">
  <span id="t1">This could be a very long text </span>
  <span id="t2">&#160;suffix 1</span>
  <span id="t3">&#160;suffix 2</span>
</p>

Что я хотел бы сделать, так это, в зависимости от места, доступного для #container, добавить многоточие к первому из промежутков, чтобы я получил что-то вроде:

Это очень длинный текст суффикс 1 суффикс 2 // Если хватит места для всего.

Это очень длинно... суффикс 1 суффикс 2 // Если для всего не хватает места.

Это v... суффикс 1 суффикс 2 // Если свободного места еще меньше.

Как видите, место для суффикса должно всегда сохраняться, и только к первому тексту диапазона следует применять многоточие.

Большое спасибо за вашу помощь заранее! ;-)


html css ellipsis
person Germán Toro del Valle    schedule 11.12.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете сделать это, используя свойство CSS text-overflow:ellipsis

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

Вы можете найти полный справочник/руководство по его использованию здесь: http://davidwalsh.name/css-ellipsis< /а>

person Jason    schedule 11.12.2012
comment
Привет Джейсон, большое спасибо за ваш ответ :) Единственным недостатком вашего решения является то, что мне нужно будет установить ширину диапазона #t1, и я могу не знать эту информацию заранее, поскольку не только контейнер, в котором находится ‹p › включен может быть переменным, но также и возможными суффиксами. Я мог бы использовать вашу технику в сочетании с использованием getComputedStyle(), но я надеялся получить что-то на 100% ориентированное на CSS. Пожалуйста, взгляните на этот jsbin.com/aregeq/1/edit, чтобы увидеть, что я искал бы. Как я уже сказал, не только ширина блока, но и ширина суффиксов может быть переменной... ;-) Спасибо! - person Germán Toro del Valle; 12.12.2012
comment
Итак, это ссылка на ваше решение? Или есть еще что-то? - person Jason; 12.12.2012

arrow_upward
0
arrow_downward

Как я уже сказал, на данный момент лучшее решение, которое я нашел, основано на Javascript. См.: http://jsbin.com/aregeq/4/edit.

person Germán Toro del Valle    schedule 12.12.2012