Predolgo besedilo v premajhnem polju je pojav, ki ga redno srečujemo na spletnih straneh. Najlažja in očitna rešitev je uporaba CSS značke overflow:hidden s katero odvečno besedilo enostavno odrežemo. Problem, ki tu nastane je nenaravni rez besedila, ki nam ni v ponos. Elegantnejša rešitev je uporaba CSS značke text-overflow: ellipsis, ki besedilo odreže in na koncu doda tri pike – “…”.

CSS značka text-overflow: ellipsis

Za učinkovito uporabo lepih zaključkov potrebujemo značke width, white-space, overflow in text-overflow.

.odrezibesedilo {
width: 200px; /* omejimo širino polja */
white-space: nowrap; /* besedilo se ne prelomi */
overflow: hidden; /* skrijemo odvečno besedilo */
text-overflow: ellipsis; /* dodamo elegantejši zaključek */ }

Potrebno je omejiti širino polja za izpis, prisiliti besedilo v eno vrstico (white-space: nowrap), skriti besedilo, ki sega izven širine polja in seveda dodati lep zaključek – “…”.

CSS značka text-overflow: ellipsis je podprta v večini novejših brskalnikov. Podrobnejši pregled podpore brskalnikov CSS znački text-overflow.

Poleg CSS rešitve imamo na voljo tudi drugačne rešitve, npr. PHP rešitev ali Javascript rešitev (Clamp.js) za elegantnejše krajšanje besedila.