2012-03-14 181 views
6

¿Cómo ocultar parte del texto dentro de div o span?ocultar parte del texto html, css, javascript

Tengo un texto de 160 caracteres, pero me gustaría mostrar sólo el primer 40.

tengo que tener el texto completo dentro de mi div, span como lo hago búsquedas javascript.

Respuesta

5

Necesitará algunos javascript para crear un lapso alrededor de los últimos 120 caracteres que los esconden. Hay un atributo CSS "visibilidad: oculto" que se puede aplicar al tramo.

Algo así debe ser el resultado:

<div>first 40 chars <span style="visibility:hidden">last 120 chars</span></div> 
+1

Esto plantea la pregunta: "¿Cómo puedo encontrar los primeros 40 caracteres?" ... (suponiendo que esto no es HTML estático) –

+0

@Madmartigan Si no es HTML estático, podría agregar el lapso al generar el página en el servidor. No debería ser demasiado difícil en PHP o ASP. Fácil con JQuery también. – GolezTrol

4

Si desea recortar el div a un cierto tamaño, en lugar de un número exacto de caracteres, que sólo puede dar el div del tamaño que desee y especifique overflow: hidden para recortar el contenido que no se ajusta.

Si se asegura de que la altura del div sea una multitud de la altura de línea del texto, no tendrá el contenido recortado en el medio (vertical) de una línea.

10

Puede usar una propiedad de css simple para su elemento "text-overflow: ellipsis;" Para utilizar esta propiedad de manera efectiva, debe aplicar algunas propiedades relacionadas junto con eso.

Por ejemplo:

<div style="width: 50px; text-overflow: ellipsis; white-space: nowrap; 
overflow: hidden;">Some text goes here</div> 

* probado en Chrome.

+0

Eso es pura magia. – fiatjaf