HTML обрезает контент на основе высоты div

У меня есть div с шириной 130px a высота 200px.

В этом div отобразится различный текстовый контент (я написал несколько JS, чтобы затухать и выходить из другого контента). Проблема даже в том, что я попытался усекать текст, чтобы сказать 180 символов, иногда содержимое, загруженное в этот div, может содержать изображение (или оно может не совпадать) или может содержать некоторые разрывы строк (или, возможно, нет), поэтому фиксированный счетчик символов для усечения иногда не обрезается достаточно текста (т.е. разрыв строки или, возможно, изображение заняло бы больше вертикального пространства в div).

В идеале я хотел бы усечь и добавить эллипсис в контент, когда он собирается преодолеть ограничение по высоте 200 пикселей - это возможно? Я посмотрел на свойство CSS text-overflow... это похоже на работу только для обрезания по ширине (или это неправильное предположение?)

Возможно, есть решение на основе JS или, возможно, вычисление количества символов и изображения (размеры изображения ARE фиксированные) и разрыв строки будет занимать и усекать после этого.

Любые идеи очень ценятся.

Ответ 1

Я использовал dotdotdot плагин jQuery для решения подобной проблемы. Разрывы строк не должны быть проблемой с dotdotdot, но вставленные изображения должны иметь атрибуты ширины и высоты, указанные в html.

Если вы динамически генерируете контент, вы можете определить размеры изображения на стороне сервера (например, getimagesize, если вы используете PHP). Если это не вариант, вы можете инициализировать dotdotdot внутри $(window).load(), но это, вероятно, покажет контент без эллипсиса, пока не загрузятся все носители на странице.

Ответ 2

Здесь решение:

http://jsfiddle.net/2jCHg/2/

В конце текстового контейнера находится висячий контейнер с эллипсисом. Эллипсис скрыт с использованием JavaScript, если текст соответствует контейнеру. <span> для эллипсиса должен иметь фон, чтобы закрыть оригинальный текст. Я использовал плоский белый в моем примере. Вы можете дополнительно использовать PNG с альфа-прозрачностью, чтобы закрыть текст с помощью градиента (прозрачный до белого).

Вы можете по желанию ввести эллипсовую разметку с помощью script, чтобы сохранить первоначальную разметку.

Также жаль, что эллипсис правильно обоснован, а не сразу после последнего отображаемого символа.

Разметка:

<div class="container">
    <div class="summary">
        Your text goes here
    </div>
    <div class="ellipsis"><span>&hellip;</span></div>
</div>

Стиль:

.container {
    width: 200px;
    border: 1px solid #888;
    padding: 0.5em;
    line-height: 1.2em;
    margin-bottom: 10px;
}
.summary {
    height: 6em; /* adjust based on line-height * rows desired */
    overflow: hidden;
}
.ellipsis {
    height: 0;
    position: relative;
    top: -1.2em;
    text-align: right;
}
.ellipsis span {
    background: white; /* occlude text with background color */
    padding-left: 0.5em;
    position: relative;
    top: -0.25em;
}

Script:

$(".summary").each(function () {
    $(this).next().toggle(this.scrollHeight > this.offsetHeight);
});

Ответ 3

Попробуйте следующее:

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

Ответ 4

Попробуйте следующее:

.ellipsis{ 
  white-space: word;
  overflow:hidden;
}

.ellipsis:after{
  content:'...';
}