Затухание текста средствами CSS

Иногда бывает необходимость при верстке сайта вывести на экран только часть текста. Чтобы пользователю было понятно, что далее следует продолжение можно, например, поставить троеточие или ссылку «читать далее». Но есть весьма красивый способ сделать так, чтобы текст постепенно затухал.
Чтобы было понятно о чем идет речь сразу приведу пример.
Из всего материала, который мне удалось найти за день более всего мне подходил простой и понятный способ, описанный здесь. Но он имеет существенный минус: тень сложно позиционировать и боковые края приходится отделять, используя отступы.
Для тех, кто ищет простой способ сделать затемнение текста привожу свой простой пример.

Итак, нам понадобится только один блок, в котором будет текст, который нужно затемнить:

<div id="textbox">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>

И всего два класса CSS:

#textbox{
    max-height:100px;
    overflow:hidden;
    margin-top:-20px;
}
#textbox:before{
    content:"";
    display:block;
    height:20px;
    position:relative;
    top:80px;
    background-image:linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 75%)
}

Теперь суть:
Используя псевдокласс before мы создаем маленький блок с градиентной заливкой. По умолчанию он располагается вверху блока с текстом. Используя position:relative отодвигаем этот блок вниз так, чтобы он закрывал одну (или несколько) последних строчек текста. Все.

Из преимуществ можно выделить:
— простота реализации (используем только css)
— выделяемый текст

Из минусов:
— Не работает в IE до 9 версии включительно (кто б сомневался)
— Подходит для блоков с фиксированной высотой