Я публикую это, потому что считаю, что мое решение менее сложное, чем популярное, которое включает псевдоэлементы и поведение с плавающей точкой. Недавно мне пришлось создать решение, которое работало бы в IE7, поэтому псевдоэлементы не были опцией в первую очередь.
Техника включает в себя 4 элемента:
- Контейнер уровня блока, который определяет максимальную высоту содержимого
- Встроенная оболочка для текстового содержимого
- Многоточие, содержащееся во встроенной оболочке
- Элемент 'fill', также внутри встроенной оболочки, который закрывает многоточие, когда текстовое содержимое не превышает размеры контейнера
Как и в предыдущих решениях, предназначенных только для CSS, метод требует наличия сплошного цветного фона или фонового изображения с фиксированным положением для содержимого: многоточие должно скрывать части текста, а заливка - затемнять многоточие. Вы можете сделать эффект причудливого градиента, чтобы текст перешел в многоточие, но я оставлю эту косметическую деталь на усмотрение.
Структура HTML
<!-- The block level container. `clamped-2` for 2 lines height -->
<p class="clamped clamped-2">
<!-- The inline wrapper -->
<span class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
<!-- The ellipsis, which can contain anything you want -
(a 'more' link, for example) -->
<span class="ellipsis">
…
</span>
<!-- The fill, which covers the ellipsis when the text doesn't overflow -->
<span class="fill"></span>
</span>
</p>
CSS
body {
/* We need a solid background or background-position: fixed */
background: #fff;
/* You'll need to know the line height to clamp on line breaks */
line-height: 1.5;
}
.clamped {
overflow: hidden;
position: relative;
}
/* Clamp to 2 lines, ie line-height x 2:
Obviously any number of these classes can be written as needed
*/
.clamped-2 {
max-height: 3em;
}
/* The ellipsis is always at the bottom right of the container,
but when the text doesn't reach the bottom right...
*/
.clamped .ellipsis {
background: #fff;
bottom: 0;
position: absolute;
right: 0;
}
/* ...It's obscured by the fill, which is positioned at the bottom right
of the text, and occupies any remaining space.
*/
.clamped .fill {
background: #fff;
height: 100%;
position: absolute;
width: 100%;
}
Вот скрипка, демонстрирующая это : измените ширину вашего браузера или измените текст, чтобы увидеть его смещение с многоточия на безэллипсис.
Помимо произвольного фактора элегантности, я считаю, что это более производительно, чем популярное решение, потому что оно не использует поплавки (которые требуют много перекрашивания) - абсолютное позиционирование гораздо проще вычислить, поскольку нет зависимости при расчете макета.