Przycinanie długich linijek tekstu
31 lipca 2006
Używając systemu na pewno mieliście okazję tak zmniejszyć okno, że część etykietek tekstowych w środku została przycięta. Pojawia się wtedy zgrabnie wielokropek wskazując, że dalej jest coś napisane. Nie sposób zliczyć miejsc, w których działa takie proste udogodnienie - występuje praktycznie wszędzie.
Dlatego też musiało się znaleźć w sieci. Nie wszystkie decyzje Microsoftu są złe, jedną z nich było dodanie do CSS właściwości text-overflow, która po przybraniu wartości ellipsis powoduje dodanie znaku wielokropka, jeśli tekstu jest za dużo. Dodatkowymi zasadami jakie należy spełnić, to ustawić zwykły overflow na hidden oraz upewnić się, że tekst utworzy jedną linijkę za pomocą white-space.
#hellip {width: 150px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
Właściwość ta jest tak oczywista, że została dodana do szkicu CSS3 i zaczyna być implementowana w innych przeglądarkach. Jedną z nich (bo nie jestem pewny czy pierwszą) jest Opera 9. Wykorzystując mechanizm rozszerzania CSS prezentuje wsparcie dla -o-text-overflow: ellipsis.
Bug dla Mozilli wisi od października poprzedniego roku i może po tym ruchu Opery dostaniemy -moz-text-overflow. Kto wie. :) Do tego czasu możemy korzystać ze skryptu JS napisanego dla Firefoksa. Dodatkowo możemy tam zobaczyć jak podpiąć skrypt JS tylko dla niego przez XBL.
Demo text-overflow działające na Internet Explorerze 6+, Operze 9 i Firefoksie.
Właściwość text-overflow można też z powodzeniem wykorzystać w tabelkach - tam chyba będzie najbardziej przydatna. Należy tylko pamiętać, że musimy dla takiej tabelki ustawić table-layout: fixed.
O wiele lepszy sposób dla Gecko (Firefoksa) wykorzystujący właściwości XUL.
Błażej Stokwisz 6
31 lipca 2006, 10:43
Bartini 8
31 lipca 2006, 11:21