Sök på tekniken.nu

Om tekniken.nu

På tekniken.nu bloggar Iteams konsulter om det som ligger dem varmast om hjärtat - teknik.
www.iteam.se

Prenumerera på tekniken.nu

Bloggportalen.se
Top Datorer bloggar
Web Analytics

Clicky

En självklarhet!
Teknikbloggen logotype

CSS-tricks: Förkorta rubriker med "..."

2010-02-24 16:40 - Utvecklingstips av Christian Landgren
Christian Landgren
Christian Landgren
Systemutvecklare
Iteam

En dold feature i CSS standarden är ”text-overflow: ellipsis” som låter en text förkortas med overflow:hidden, men som också automatiskt lägger till tre punkter som markerar att texten är avkortad. På engelska heter detta ellipsis.

En lustig detalj är att denna standard finns och fungerar redan från IE6 och uppåt.

Använd följande syntax:

text-overflow: ellipsis;

eller

text-overflow: ellipsis-word;                     

Läs mer här:

http://www.w3.org/TR/2001/WD-css3-text-20010517/#text-overflow-props

och se exempel här:

http://www.css3.info/preview/text-overflow/

... och du vet väl att Iteam just nu söker duktiga medarbetare? Läs mer på iteam.se

Andra bloggar om:
2010-03-05 13:45 av Christian
En sak att tänka på är att för att ovanstående ska fungera måste man också "tvinga" texten att inte brytas till nästa rad på vanligt sätt. Dvs lägg till white-space: nowrap;
2010-11-12 11:42 av Daniel
Funkar inte i Firefox...

Kommentera

Namn

Email

URL

Kommentar

Skriv vad som står i bilden till höger