Texto desvanecido demasiado largo dentro del elemento HTML

Entonces mis preguntas son similares a esto:

recortar texto demasiado largo dentro de div

Lo que no quiero hacer es tener un extremo difícil del texto (cortar lo que se desborde).

La salida deseada no incluiría puntos suspensivos (...) pero se desvanecería. Entonces si tuviera algo como:

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

luego, donde sea que decida, digamos a mitad de camino ... la n se desvanecería a medias, y la t se desvanecería casi por completo. Por supuesto, el posicionamiento es aleatorio y podría caer entre 3 o 4 letras ...

Aquí hay soluciones aceptables en orden de preferencia.

¿Es posible desvanecer el texto solo con CSS?Si no es posible, utilizando otro elemento en div.text, ¿puedo lograr lo que quiero (¿pueden opacarse las opacidades?).Hazlo con jQuery? (ugh ... no preferido)

Respuestas a la pregunta(2)

Su respuesta a la pregunta