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
Bloggtoppen.se
Top Datorer bloggar

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/

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;

Kommentera

Namn

Email

URL

Kommentar

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