Reduzir o tamanho do texto por muito tempo dentro do elemento HTML

Então, minhas perguntas são semelhantes a esta:

cortar texto por muito tempo dentro de div

O que eu não quero é ter um final difícil para o texto (cortando qualquer texto que transbordar).

A saída desejada não incluiria elipses (...), mas desapareceria. Então, se eu tivesse algo como:

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

então, onde quer que eu decida, digamos no meio do caminho | n ... o n estaria meio desbotado, e o t estaria quase completamente desbotado. Claro que o posicionamento é aleatório e pode cair em 3 ou 4 letras ...

Aqui estão as soluções aceitáveis em ordem de preferência.

É possível desvanecer o texto apenas com css?Se não for possível, utilizando outro elemento no div.text, posso realizar o que quero (as opacidades podem desaparecer?).Faça isso com jQuery? (ugh ... não preferido)

questionAnswers(2)

yourAnswerToTheQuestion