В html / css есть ли способ отрезать диапазон вместо перехода к другой строке (и визуально показать отсечение?)

У меня есть веб-страница asp.net-mvc, где я показываю некоторый текст в строке после нескольких изображений, и я не хочу, чтобы текст переносился на следующую строку. Я хочу, чтобы он был обрезан и включал "..." в конце, если есть обрезание? (Я нервничаю, если нет визуального индикатора отключения, тогда пользователи не поймут, что это происходит...

  <img src="some_image.png">
  <img src="some_image1.png">
  <img src="some_image2.png">
  <span id="myText">a bunch of text after the images</span>

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

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

Я мог бы выполнить некоторую логику «обрезки» на стороне сервера просто на основе длины строки, но я не понимаю, как определить, будет ли иметь место перенос (учитывая ширину экрана пользователей и т. д.)

Любые предложения для этой ситуации?


html css asp.net-mvc word-wrap
person leora    schedule 19.04.2014    source источник
comment
возможный дубликат Кто-нибудь знает как использовать CSS text-overflow для переноса текста?   -  person Anonymous    schedule 19.04.2014
comment
Возможно, это не точная копия, но суть понятна.   -  person Anonymous    schedule 19.04.2014

Ответы (2)


arrow_upward
10
arrow_downward

Только CSS: http://jsfiddle.net/FdyG2/1/

div { 

    width: 400px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

}

Избегайте разрыва строки: white-space: nowrap;

Три точки в конце строки: text-overflow:ellipsis;

Важно: вам нужно установить width и overflow:hidden.

person Hugo    schedule 19.04.2014
comment
Это правильный ответ, И он работает с диапазоном. Нельзя минусовать! Я добавил скрипт с диапазоном здесь: jsfiddle.net/FdyG2/2 - person Slugge; 19.04.2014

arrow_upward
1
arrow_downward

Вот http://jsfiddle.net/GdU9Q/, где показано, как это можно сделать.

Ваш JS:

$("#wrapper").dotdotdot({
    wrap: 'letter'
});

Ваш HTML: в html/css есть ли способ «обрезать» строку вместо перехода к другой строке (и визуально отображать обрезание?)

Ваш CSS:

#wrapper {
    width: 200px;
    height: 20px;
    border: 1px solid red;
}

Я хочу, чтобы это помогло вам. Удачи!

person Federico Dorfman    schedule 19.04.2014
comment
согласно моему вопросу, я не хочу иметь жестко закодированную ширину. . Я хочу, чтобы он разобрался. . - person leora; 19.04.2014
comment
также мой текст находится в диапазоне (не div) - person leora; 19.04.2014
comment
нет необходимости отрицать ответ, вам просто нужно настроить его в соответствии с вашими потребностями. как это должно работать. А что касается типа элемента, просто измените div на span, он точно такой же, это был только пример того, что вы могли бы сделать. - person Federico Dorfman; 19.04.2014
comment
Я удалил отрицательное голосование, но я до сих пор не понимаю, как проценты решат эту проблему, поскольку я не знаю этого заранее. суть моего вопроса заключалась в том, чтобы нам досталась остальная часть текущей линии. . - person leora; 19.04.2014