Cortar un texto con Css3

Aquí os dejo otro truco que me enseño mi compañero de trabajo Javier Bertos. Si alguna vez necesitáis cortar un texto cuando llegue a un cierto ancho, podéis combinar los atributos de css3; white-space:nowrap y text-overflow:ellipsis para poder conseguir ese efecto.

Para hacerlo, necesitareis indicarle al bloque padre una anchura máxima y, en el bloque hijo, poner los atributos white-space con el valor nowrap, text-overflow con el valor ellipsis, overflow con el valor hidden y definirle una altura. Con esto conseguiréis que css corte automáticamente el texto cuando llegue al ancho fijado por el bloque padre, añadiendo puntos suspensivos a continuación del último carácter cortado.

Os dejo un ejemplo para mejor comprensión:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="es">
	<head>
		<style type="text/css"> 
			article{
				width: 140px;
			}
			section{
				height: 20px; 
				overflow: hidden; 
				white-space: nowrap; 
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<article>
			<section>
				Texto extremadamente largo que necesita ser cortado para que se visualice correctamente en el ancho permitido por su bloque padre.
			</section>
		</article>
	</body>
</html>

Os habréis fijado que en el bloque hijo se ha definido una altura. Esto es debido a que este efecto solo funciona para textos que ocupen una linea. Si necesitas cortar un texto que ocupe más de una linea siempre puedes intentar cortarlo cuando se esta generando la vista de tu web en el servidor. Si vuestra web funciona con php, tal vez os pueda ayudar el siguiente post donde se comenta como cortar un texto con php.

Un pensamiento en “Cortar un texto con Css3

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *