Fade tekst zbyt długo wewnątrz elementu HTML

Question

Więc moje pytanie jest podobny do tego:

crop text too long inside div

Co nie chcę zrobić, to mieć twardą końcówkę do tekstu (odcięcie cokolwiek przepełnienia tekst) .

Pożądane wyjście nie będzie zawierać elips (...), ale "zniknie". Więc gdybym miał coś takiego:

<div class="text">This is the really long area of text that I want to chop</div> 

potem na gdziekolwiek ja decyduję, powiedzmy w połowie drogi w wa | n ... nt byłoby pół wyblakłe, a t byłaby niemal całkowicie zniknęły. Oczywiście pozycjonowanie jest losowe i może spaść na 3 lub 4 litery ...

Oto dopuszczalne rozwiązania w kolejności preferencji.

1. Czy można ciąć tekst za pomocą css sam?
2. Jeśli nie jest to możliwe, używając innego elementu w pliku div.text, czy mogę osiągnąć to, czego chcę (czy mogą zniknąć zmętnienia?).
3. Zrób to z jQuery? (ugh ... nie preferowane)

Answer 1

Zakładając, że tło strony jest białe: Utwórz gif z przejściem od przezroczystości do bieli (od lewej do prawej). Nakładaj to po prawej stronie elementu div. Twój tekst będzie blednąć do białego.

Jest to podobne do tworzenia "cieni".

Edited by dodać:

mam odpowiedziałeś swoje elementy listy bezpośrednio.

1. Nie, nie można zignorować tekstu za pomocą samego CSS, chyba że robisz to znak po znaku; ale to prawie niemożliwe do kontrolowania w różnych przeglądarkach i rozdzielczości ekranu.

2. Opady nie znikają.

3. Nie znam obiektu jQuery, który to robi, ale nie użyłem go zbyt wiele.

Answer 2

Twoje rozwiązanie 2. jest rzeczywiście możliwe. Trzeba tylko użyć absolutnie pozycjonowanego elementu, który ma tło gradientu liniowego, od białego do przezroczystego.

Nie ma potrzeby tworzenia obrazu.

Można spojrzeć na http://css-tricks.com/text-fade-read-more/