Początek łańcucha wielokropka CSS

Autor: David Walsh, 17 grudnia 2018 r.

  • 6

Byłem niesamowicie szczęśliwy, kiedy CSS text-overflow: ellipsis (żonaty, stały width i overflow: hidden były wprowadzony do specyfikacji CSS i przeglądarek; funkcja ta pozwoliła nam przestać próbować łączyć obliczanie szerokości JavaScript z obliczaniem szerokości ciągu i obcinaniem. Wielokropek CSS był również bardzo przyjazny dla dostępności. CSS text-overflow: ellipsis funkcja jest świetna, ale zasadniczo ma na celu elipsę ciągów tylko na końcu; a co, jeśli chcemy elipsę początku ekranu? Przypadek użycia jest dość rozsądny: pomyśl o wyświetleniu ścieżki pliku – wiele razy katalogu dla zestawu plików jest to samo, w którym przypadku „chciałbyś wyświetlić koniec łańcucha, a nie jego początek. Pozwól, że pokażę ci sztuczkę z wielokropkiem na początku łańcucha!

CSS

Wyświetlanie wielokropka z przodu sznurka jest mos tak samo jak wielokropek na końcu, tylko z jedną prostą sztuczką: aby dodać wielokropek na początku łańcucha, użyj RTL i text-align, aby przyciąć początek łańcucha! Odtwarzanie RTL z text-align to genialny sposób na uzyskanie pożądanego efektu wielokropka CSS na początku elementu lub łańcucha. Byłoby wspaniale, gdyby specyfikacja CSS zaimplementowała bardziej niezawodny system wielokropek, ale na razie uwielbiam takie niesamowite sztuczki CSS!

Write a Comment

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *