¿Cómo puedo acceder al texto real que se muestra en un DIV cuando se utiliza el desbordamiento de estilo CSS: oculto?

Tengo el siguiente contenido DIV en mi página, que muestra texto dynamic:

Utiliza el siguiente CSS para cortar texto adicional:

 #someContent { height: 200px; width: 200px; overflow: hidden; } 

Si cargo este texto en el DIV:

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, en nonummy quam ante ac quam. Mecenas urna purus, fermentum id, molestia en, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti.

… el CSS hace que solo se muestre el siguiente texto en el DIV:

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, en nonummy quam ante ac quam. Mecenas urna purus, fermentum id, molestia en, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue “

Esto funciona como se esperaba

Sin embargo, me preguntaba si hay alguna forma de que pueda acceder al texto mostrado usando JavaScript. Cuando bash acceder a la propiedad innerHTML de DIV, devuelve todo el texto cargado originalmente en el DIV.

  alert(document.getElementById("mainArticleContent").innerHTML);  

Mi objective final es reemplazar la última palabra en el contenido recortado con puntos suspensivos (“…”). Pensé que podría hacer esto en JavaScript para que se muestre en todos los navegadores, no solo en IE, como con la propiedad de CSS text-overflow: hidden .

¿Algunas ideas? es posible?

No creo que lo que estás pidiendo hacer sea posible con javascript.

Alternativamente, ¿por qué no truncar el texto en una cuenta de caracteres específicos del servidor? Probablemente no tendrá el tipo de control que desea sobre el tamaño del div que se muestra en la página, dependiendo de la fuente que haya seleccionado, pero debería resolver su problema.

Editar:

Eche un vistazo a esto para obtener puntos suspensivos CSS automáticos. Hay algunas advertencias y parece bastante específico del navegador, pero este es otro método de hacer lo que quiera.

Este sitio explica una técnica que puede ser útil para obtener la porción de texto mostrada. No estoy seguro de cuán preciso sería este método, pero sospecho que te acercaría bastante a lo que deseas: http://www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with -dots-via-javascript

No hay una manera fácil de hacerlo. Debe calcular la cantidad de texto que puede verse en el DIV en función del tamaño de div, el tamaño de fuente, el tipo de fuente y el desplazamiento del texto dentro de div. Recuerde que puede usar la compensación negativa para mostrar diferentes partes del texto.

Debería poder calcular el algoritmo para calcular qué cantidad de texto puede contener el DIV en función de todos esos números, pero es un poco complicado debido a la envoltura de línea.

Aquí hay una idea rápida usando jQuery:

   

No es necesario usar Javascript para tener puntos suspensivos. Simplemente puede usar la propiedad de text-overflow CSS y establecer su valor en “puntos suspensivos”. Usted ve la documentación aquí .

Y si quiere tenerlo después de varias líneas, aconseje esta guía .

Podría hacer el mismo truncamiento en función del recuento de caracteres en el lado del cliente. Almacene la parte truncada en algún otro elemento DOM (o su propio atributo si no le importa ese tipo de cosas). Tener todo listo para comenzar en body.onLoad ().

Si esto es simplemente para fines de visualización, entonces simplemente podría tener un div completamente posicionado con “…” en la parte inferior derecha del contenedor, por lo que en la parte superior del texto.