Остановить текст из-за запуска его контейнера

Question

У меня есть контейнер, в котором сообщение получает эхо, сообщение, в котором он сам не имеет фиксированного размера, сгенерированный пользователем, может случиться, что если строка текста тоже долгое время, он может перетекать в его контейнер с разрывом дизайна.

Есть ли способ (надеюсь, только с CSS, хотя js в порядке), чтобы сделать обрезку текста и оставить его с ..., тогда я могу поместите ссылку на текст на другой странице.

Вы можете, очевидно, прекратить это, используя overflow:hidden, но я бы хотел, чтобы более простой подход, а не просто резка его прямо. Кажется, я вспоминаю про что-то вроде этого с css3, но из-за моей жизни не могу понять, как это называется.

Ive сделал jsfiddle проблемы здесь - http://jsfiddle.net/6Fk7B/

Answer 1

CSS собственности text-overflow:ellipsis, хотя поддержка браузера меняется

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Answer 2

text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap; 

Это должно сделать это для вас. Все должно быть включено.

Вы можете также включать в себя следующие префиксы браузеров:

-ms-text-overflow: ellipsis; 
-o-text-overflow: ellipsis; 

Это не будет совершенным во всех браузерах, но это должно быть хорошо для большинства: http://caniuse.com/#feat=text-overflow

Answer 3

Использование JavaScript вы могли достигните этого, используя substring. jQuery не требуется, но это немного упрощает.

var myText = $('.myBox').text(), 
maxLength = 250, 
more = '...'; 

if (myText.length > maxLength) { 
    myText = myText.substring(0, 250); 

    $('.myBox p').text(myText + more); 
} 

Смотрите мой пример пример: http://jsfiddle.net/clrux/6Fk7B/14/

Answer 4

Вы можете проба http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/ фактический код находится здесь http://codepen.io/romanrudenko/pen/ymHFh

Честно говоря, это сложно поставить многоточие для абзаца, но довольно прямолинейный для одного текст строки.

Answer 5

Является ли это разумной отправной точкой для вас?

Fiddle: http://jsfiddle.net/QkugN/

В основном вы добавляете все содержимое в div и скрыть его, используя обычный метод overflow:hidden. Вы также добавляете вкладку, которая при наведении отображает остальную часть содержимого. Если вы используете абсолютное позиционирование для состояния мыши, содержимое моментально будет удалено из потока и ему будет разрешено накладывать любые окружающие материалы. Возможно, это не полное решение, но это чистое направление CSS, которое вы могли бы изучить.

Бит, который занимается бизнесом, является селектором General Sibling «~» (тильда). Поддержка этого довольно прочная с современными браузерами.