puntos suspensivos de desbordamiento de texto sin “white-space: nowrap”?

Me preguntaba si hay alguna manera inteligente de lograr el efecto de la elipsis CSS sin la necesidad de aplicar white-space: nowrap también.

En otras palabras, digamos que tenemos un elemento de bloque de cierta altura y nos gustaría dejar que se llene con contenido de texto, pero las elipsis deberían aplicarse tan pronto como no haya más espacio en las direcciones horizontales más verticales .

Ejemplo rápido: http://jsfiddle.net/fpv9n/2/

El texto debería ser como es, pero también con una elipsis al final. ¿Alguna forma de lograr eso usando CSS? Tomaría también en cuenta las soluciones de JS.

No hay forma de hacer esto usando CSS puro. Es monstruoso y triste. A menudo he deseado esto cuando quieres que el navegador “elipsifique” un texto de varias líneas con texto posiblemente desbordado siempre que se derrame del contenedor.

Puede falsificar puntos suspensivos con contenido: ‘…’ y posición: absoluta; establecer la altura dentro de un número de línea (agregar eventualmente relleno vertical)
http://jsfiddle.net/V3ZQH/

 span { background-color: red; width: 100px; /*height: 50px;*/ height:2.4em; display: block; overflow: hidden; text-overflow: ellipsis; /*white-space: nowrap; */ position:relative; padding:0 0.5em; } span:after { content:'...'; background:inherit; position:absolute; bottom:0; right:0; box-shadow:0 0 5px red } 

Solo conozco problemas de trabajo que involucran content , posicionamientos absolutos, elementos auxiliares con puntos y relleno. Creo que probablemente sea mejor que su altura sea una multitud exacta de la altura de su línea, por ejemplo, al hacerlo:

 height: 2em; font-size: 1em; line-height: 1em;