How cut a text using css3

Here are other trick that show me my coworker Javier Bertos. If any time you need cut a text when it exceeds a specific width, you can combine the attributes of css3; white-space:nowrap and text-overflow:ellipsis for made it.

For made it, you need indicate to principal block a max width and, on son block, the attributes white-space with the value nowrap, text-overflow with the value ellipsis, overflow with the value hidden and define a height. With this, you have the automatic effect to cut the text, adding after the last character cut.

I leave an example for better understanding:

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>
				Extremely long text that needs to be cut to be displayed properly in width allowed by its parent block.
			</section>
		</article>
	</body>
</html>

Probably you noticed that the son bloc have a height. It is because this effect only works for the text that only have a line. If you need cut a text that have more that one line always you can try cut it when the view is generating on your server. If you web works with php, is possible that this post where show how cut a text using php can help us.

Leave a Reply

Your email address will not be published. Required fields are marked *