Tallar un text amb Css3

Aquí us deixo un altre truc que em va ensenyar el meu company de feina Javier Bertos. Si alguna vegada necessiteu tallar un text quan es passi d’un cert ample, podeu combinar els atributs de css3; white-space:nowrap i text-overflow:ellipsis per aconseguir aquest efecte.

Per poder fer-ho, necesiteu indicarli al bloc para una alçada màxima i, en el bloc fill, posar els atributs white-space amb el valor nowrap, text-overflow amb el valor ellipsis, overflow amb el valor hidden e indicar-li una amplada. Amb aixo aconseguireu que css talli automàticament el text quan arribi al ample fixat per el bloc pare, afegint punts suspensius a continuació del últim caràcter tallat.

Us deixo un exemple per millor comprensió:

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>
				Text extremadament llarg que necessita ser tallat per a que es visualitzi correctament en el ample permès per el seu bloc pare.
			</section>
		</article>
	</body>
</html>

Us haureu fixat que en el bloc fill s’ha de definir una alçada. Aixo es degut a que aquest efecte nomes funciona per als textos que ocupen nomes una línia. Si necessiteu tallar un text que ocupa mes d’una línia sempre podeu intentar tallar-lo quan s’esta generant la vista de la vostra web al servidor. Si la vostra web funciona amb php, potser et pugi ajudar el següent post on es comenta com tallar un text amb php.

Deixa un comentari

L'adreça electrònica no es publicarà Els camps necessaris estan marcats amb *