CSS-tricks: Förkorta rubriker med "..."
tekniken.nu - 5 mar 2010 av irony i css3 m fl
Det kan vara knepigt att räkna ut exakt hur lång en text kommer bli i användarens webbläsare och räkna ut var texten ska kortas för att rymmas. Men som tur är finns den funktionen redan inbyggd i CSS!
irony
hordak
Dio
osiris
murtlest
nissewangstedt
jarnesjo
Robert
U-Nas
rickyryden
wettdinho
roche
bywire
NEOLiNES
Web_biz
bigboss
maf
hagdahl
janet
jocap
chantek
Av U-Nas den 6 mars 2010 Rapportera
För att göra samma sak i PHP så krävs både en och tre rader kod :)
Av murtlest den 8 mars 2010 Rapportera
Om man använder trinary-operatorn kan det göras på en rad i php:
echo (strlen($text)>$limit-3)? substr($text,0,$limit-3)."..." : $text;
(typ, har ej testkört)
Men det är ju en presentationsgrej så det ska givetvis göras med css. Mycket coolt att det fanns en sån egenskap, hade jag aldrig sett förr.
Av murtlest den 8 mars 2010 Rapportera
Ternary-operatorn menar jag.
Av osiris den 8 mars 2010 Rapportera
@ove: skillnaden är att när det görs på klienten så vet koden hur mycket plats texten faktiskt tar.
Av irony den 8 mars 2010 Rapportera
Exemplet för att göra behovet lite tydligare är om man tänker på strängen
"MMMMMMMMMM" som är tio tecken lång och jämför med strängen
"IIIIIIIIII" som också är tio tecken lång. Skulle man klippa av dessa strängar efter fem tecken blir självklart längden inte samma på båda:
"IIIII..."
jämfört med
"MMMMM..."
men med CSS tricket ovan blir de lika breda på skärmen innan de klipps av eftersom beräkningen sker av renderingsmotorn och inte av servern.
En snygg kombination är för övrigt att kombinera detta trix med title="" taggen vilket gör att man kan hålla musen över texten och se vad som skulle stå om den fick plats (precis som i operativsystemet över förkortade filnamn)
Av irony den 29 april 2010 Rapportera
Sjukt hur många gånger de senaste veckorna vi har haft nytta av den här - rekommenderas skarpt!