Text-overflow – Afkort tekster med CSS

At beregne længden på variable tekster og derefter afkorte dem så der er plads til dem, kan være en langhåret proces med f.eks. javascript. Med CSS’s text-overflow bliver det næppe nemmere! Den afkorter teksten med 3 punktumer…inden teksten begynder at bryde.

Det er endnu ikke en del af CSS3 standarden, men den er understøttet af blandt andet IE7+, Chrome og Safari. Lad os tage et kig på den her!

Jeg opdagede et problem med netop for lang tekst til knapperne til næste og forrige artikel i bunden af siden her, sidste indlæg gav følgende nasty tekstbrydning:

Så hvordan fikser man lige det problem med for lang tekst uden en masse avanceret javascript? Lad os tage udgangspunkt i knapper (Kunne ligeså godt være en overskrift eller en hvilken som helst anden container), og her er HTML’en til dem:

<div class="button">
   En grøn knap - med en for lang tekst
</div>
<div class="button purple">
   En lilla knap - med en for lang tekst
</div>
<div class="button orange">
   En orange knap - med en for lang tekst
</div>
<div class="button blue">
   En blå knap - med en for lang tekst
</div>

Alle knapperne er tilføjet en button class, så de deler samme højde og bredde værdier m.m.:

.button {
   width: 227px;
   height: 47px;
   line-height: 47px;
   background: transparent url(green-button.png) left top no-repeat;
   text-align: center;
   color: white;
   padding: 0 10px;
}

De fire knapper har også en color class tilknyttet, der udover farve også har lidt attributter der gør lidt ved måden knapperne håndterer den lange tekst på. Knapperne ender ud med at se sådan:
4 knapper hvor den sidste viser eksempel på text-overflowDen sidste knap bruger text-overflow: ellipsis, men der skal lidt mere til end bare den.

Overflow og White-space

Den grønne knap har kun button class, dens tekst brydes og ender ned på næste linje udenfor knappen. For at undgå sådanne linjeskift kan man tilføje white-space: nowrap, som den lilla knap har fået tilføjet. Det betyder så bare at teksten fortsætter ud til højre ud over knappen, og for at undgå det kan man bruge overflow: hidden. Den går brutalt ind og skærer alt af hvad der måtte gå over bredden på ens element. Lilla og orange knaps CSS:

.purple {
   background-image: url(purple-button.png);
   white-space: nowrap;
}
.orange {
   background-image: url(orange-button.png);
   white-space: nowrap;
   overflow: hidden;
}

Overflow attributten hjalp lidt, men det ser knapt så elegant ud, nærmest som om at det er en fejl og her hjælper text-overflow.

Text-overflow!

Sammen med overflow:hidden tilføjer man text-overflow: ellipsis, og den vil så sørge for at afkort teksten og tilføje punktumer:

.blue {
   background-image: url(blue-button.png);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

Vupti, det bliver ikke nemmere! Det er muligt at text-overflow senere kan stå alene og klare jobbet, men pt. som det ser ud så skal man bruge overflow:hidden for at klippe teksten først.

Se demo

Browser understøttelse

Som nævnt så er text-overflow ikke en CSS standard endnu, men den understøttes alligevel af følgende browsere:

  • Internet Explorer 7+
  • Safari v. 5 (Muligvis lavere)
  • Chrome v. 12 (Muligvis lavere)

Firefox kan desværre ikke finde ud af den endnu, også selvom der er en -moz-text-overflow attribut, så hvis din sides besøgende er storbruger af firefox så er det igang med javascript.

Kommentarer

  1. Jeg tænker bare, at et tooltip vil være smart, hvis teksten er blevet afkortet, så man kan se teksten ved hover. Men det vil også være irriterende med tooltip på al tekst. Hvis nu man kunne lave tooltip kun der hvor ellipsis har gjort sit værk. Udfordring? :-)

    1. Det ville bestemt være en udfordring ja, og det ville nok desværre kræve javascript, for der er ikke nogen metode i CSS til at spørge på om hvorvidt en attribut er blevet “aktiveret”.

      Men der burde som minimum være en title attribut på ens elementer hvis man risikerer overflow. Det vil jeg tilføje :)

    1. Ja CSS-Tricks størrelse bliver siden her nok aldrig, men jeg håber da at jeg kan få tid til at lave lidt mere på siden snart :-)

Smid en kommentar

Felter markeret med * skal udfyldes og din e-mail-adresse vil ikke blive offentliggjort.