Анимировать высоту контейнера, добавить ... к последнему слову в абзаце

Question

У меня есть div.infotext с одним абзацем внутри.Я оживляю высоту этого div до 120px.Таким образом, ниже приведен текст, который не отображается, так как высота его обрезает.

Весь текст появляется, когда я наведу курсор на этот дел.что нет никаких признаков того, что внутри этого абзаца больше текста.Я хотел бы добавить три точки (...) в конце последнего показанного слова и исчезнуть при наведении курсора на div.

Есть идеи?

ОБНОВЛЕНИЕ: Добавлен код.

function enableHoverQuotes(){

var height3 = $('.c2244').height();
$('.introtext').css({ height: '107px', overflow: 'hidden' });

$(".introtext").hoverIntent(showInfoText,hideInfoText);

function showInfoText(){ $(this).animate({'height':height3}, 600); }
function hideInfoText(){ $(this).animate({'height':'107'}, 600); }

}

Answer 1

CSS3 предоставляет свойство переполнения текста, где вы можете определить, что вы хотите, чтобы происходило, когда текст переполняет содержащий элемент. Поддержка браузеров есть во всех основных браузерах - вы можете узнать больше об этом здесь: https://developer.mozilla.org/en/CSS/text-overflow

Что вам нужно сделать, это добавить свойство переполнения текста в ваш интротекст css

Answer 2

Добавьте это css ...

div.infotext
{
    overflow: hidden;
    text-overflow: ellipsis;
}

Это добавит ... в конце div, , если , есть больше текста.Ваш предыдущий код показа / скрытия по-прежнему будет работать, не влияя на это.

Answer 3

Как насчет этого: http://jsfiddle.net/M5rzC/4/

Answer 4

Одним из возможных способов было бы просто добавить плавающий элемент div в нижний правый угол родительского элемента div, если scrollHeight больше высоты

Код может выглядеть примерно так:а затем переключите id = "overflow", чтобы скрыть его при раскрытии div.

Answer 5

Вы можете добавить <p>...</p> в нижнем правом углу div с абсолютным позиционированием и скрыть его при наведении курсора. Это будет выглядеть для пользователя, как будто текст на самом деле вырезан. Пример:

CSS:
.more {
 position:absolute;
 bottom:0;
 right:0;
 background: #fff;
}

.container {
 position:relative;
 height:120px;
 overflow: hidden;
}

HTML:
<div class="container">
 <p>Fill in a lot of text here</p>
 <p class="more">...</p>
</div>