javascript - suspensivos - texto desbordado css

Acorte el texto largo según el ancho en píxeles

Question

Me gustaría acortar las descripciones muy largas al ancho de la columna de la tabla disponible. Tengo la información de ancho de columna en píxeles. Ahora me gustaría convertir esta medida en la cantidad de caracteres, por lo que puedo acortar el texto al número especificado.

No tengo que ser 100% correcto, una suposición cercana también funcionará.

Answer 1

Envuelva su texto en la celda en un DIV. Esto le dirá si el texto dentro del DIV es más grande que la celda:

<div id=''test'' style=''width:200px;height:100px;overflow:hidden''>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at felis. Etiam ullamcorper. Aenean fringilla, eros eu dapibus tristique, erat lacus vestibulum metus, nec pharetra leo ante et quam. Nunc ac mi molestie justo placerat laoreet. Morbi eget dolor. Curabitur pretium, mi quis iaculis molestie, dolor ligula sagittis orci, at sodales quam dolor quis sem. Suspendisse vitae risus. Maecenas vestibulum dolor vel augue. Sed purus. Ut nisi massa, vestibulum id, lobortis eget, aliquet eu, enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
</div>
<script type="text/javascript">
alert($(''test'').scrollHeight)
</script>

Si quisiera truncar al final de una palabra y agregar puntos suspensivos (...) podría, en el script, comenzar a eliminar palabras hasta que la altura sea igual o menor que el contenedor. (Estoy usando Protoype para el atajo $)

Aquí hay un ejemplo de trabajo:

<div id=''test'' style=''width:300px;height:100px;overflow:hidden''>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at felis. Etiam ullamcorper. Aenean fringilla, eros eu dapibus tristique, erat lacus vestibulum metus, nec pharetra leo ante et quam. Nunc ac mi molestie justo placerat laoreet. Morbi eget dolor. Curabitur pretium, mi quis iaculis molestie, dolor ligula sagittis orci, at sodales quam dolor quis sem. Suspendisse vitae risus. Maecenas vestibulum dolor vel augue. Sed purus. Ut nisi massa, vestibulum id, lobortis eget, aliquet eu, enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
</div>
<script type="text/javascript">
function shorten(element) {
if($(element).scrollHeight>$(element).getHeight()) {
var myText = $(element).innerHTML.split(" ")
myText.length=myText.length-2
$(element).update(myText.join(" ")+" ...")
window.setTimeout(''shorten("''+element+''")'',1)
}
}
shorten(''test'')
</script>

Podría hacer con oraciones dividiendo en un período, en lugar de un espacio, pero necesitaría un retroceso si no se encontró un período, o si lo que sobró después del truncamiento es demasiado corto.

Answer 2

Esto es para la web? Si es así, ¿por qué no usar un método más simple como usar css para ocultar el desbordamiento?

Answer 3

Estoy usando jquery 1.4.2 y la respuesta anterior no resolvió el problema pero me ayudó ... aquí está el código con algunos ajustes menores. recuerde que el contenedor necesita una altura fija y un desbordamiento oculto.

p#descr1 { height:46px; overflow:hidden; }
<script type="text/javascript">
function shorten(element) {
if ($(element).attr(''scrollHeight'') > $(element).height()) {
var myText = $(element).text().split(" ")
myText.length = myText.length - 2
$(element).html(myText.join(" ") + " ...")
window.setTimeout(''shorten("'' + element + ''")'', 1)
}
}
$(document).ready(function () {
shorten(''#descr1''); // the id of the container
});
</script>

Answer 4

La propiedad CSS de la que él está hablando es "desbordamiento de texto".

Intente agregar lo siguiente a la clase de su elemento, todos son obligatorios:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;