CSS text overflow: ellipsis, line clamp i łamanie słów
Laboratorium CSS overflow i przycinania tekstu
CSS text overflow: ellipsis, line clamp, word break | We.Inc
Zmieniaj szerokość pola z długim adresem URL i niemieckim słowem złożonym, a potem testuj na żywo overflow, text-overflow: ellipsis, line clamp, word-break, overflow-wrap i hyphens, wraz z klasami Tailwind.
Długa treść wychodzi poza pole, gdy pole jest za małe. overflow decyduje, co dzieje się z nadmiarem: visible, hidden, clip, scroll lub auto. Aby uzyskać jedną linię zakończoną kropkami, połącz white-space: nowrap, overflow: hidden i text-overflow: ellipsis. Dla kilku linii użyj -webkit-line-clamp. Aby dzielić niełamliwe słowa, użyj overflow-wrap: anywhere.
Przeciągnij suwak szerokości, a przykładowe pole zwęży się wokół prawdziwego adresu internetowego, słowa Donaudampfschifffahrtsgesellschaft i zwykłego zdania. Każda opcja overflow, zawijania i przycinania to przycisk, wynik pojawia się natychmiast, a potrzebny CSS jest wypisany poniżej.
Wybierz przykładowy tekst do wczytania: URL, długie słowo złożone lub akapit.
Przeciągaj suwak szerokości, aż tekst przestanie się mieścić.
Wypróbuj po kolei wartości overflow, ellipsis, line clamp i opcje łamania słów.
Skopiuj CSS, który daje wynik, jaki Ci odpowiada.
Ellipsis potrzebuje wszystkich trzech: nowrap, overflow innego niż visible i ograniczenia szerokości. Bez któregokolwiek z nich kropki się nie pojawią.
Wewnątrz wiersza flex przycinane dziecko potrzebuje też min-width: 0, ponieważ elementy flex domyślnie nie chcą kurczyć się poniżej swojej treści.
Umieść pełny tekst w atrybucie title lub pokazuj go przy fokusie, ponieważ przycinanie ukrywa słowa przed osobami, które nie mogą najechać kursorem.
hyphens: auto dzieli wyrazy tylko wtedy, gdy element lub jego rodzic ma atrybut lang w języku, dla którego przeglądarka ma słownik.
Najczęściej zadawane pytania
Dlaczego text-overflow: ellipsis nie działa?
Zwykle brakuje któregoś z jego partnerów. Element musi być blokowy lub inline-block z ograniczoną szerokością, mieć overflow ustawione na hidden lub clip i trzymać tekst w jednej linii dzięki white-space: nowrap. W elemencie flex lub grid dodaj też min-width: 0, aby element mógł się kurczyć.
Czy line-clamp działa bez prefiksu -webkit-?
Forma z prefiksem, czyli -webkit-line-clamp razem z display: -webkit-box i -webkit-box-orient: vertical, działa we wszystkich aktualnych głównych przeglądarkach i to ją generuje Tailwind. Właściwość line-clamp bez prefiksu z CSS Overflow Level 4 wciąż jest wdrażana, więc zanim zaczniesz polegać tylko na niej, sprawdź caniuse.
Czym różni się word-break od overflow-wrap?
overflow-wrap łamie słowo tylko wtedy, gdy inaczej by się nie zmieściło, więc zwykłe słowa zawijają się normalnie. word-break: break-all pozwala przeglądarce łamać wszędzie między dowolnymi dwiema literami, co daje poszarpany, trudny do czytania tekst. word-break: keep-all jest przeznaczony dla tekstu chińskiego, japońskiego i koreańskiego, gdy nie chcesz łamania wewnątrz słów.
Co robi overflow: clip, czego nie robi hidden?
Oba ucinają nadmiar. hidden nadal tworzy kontener przewijania, więc skrypt może go przewijać, a to wpływa na position: sticky w środku. clip zabrania wszelkiego przewijania, a z overflow-clip-margin możesz pozwolić treści wyjść kilka pikseli poza krawędź przed ucięciem.
Jak przyciąć tekst w komórce tabeli?
Ustaw table-layout: fixed na tabeli i szerokość kolumn, a potem zastosuj do komórki zwykłe trio nowrap, hidden i ellipsis. Bez stałego układu kolumna po prostu rośnie, aby zmieścić tekst. Inna opcja to max-width: 0 z width: 100% na komórce.
Pięć wartości overflow
visible to wartość domyślna, która pozwala treści malować się poza polem bez wpływu na układ wokół. hidden i clip ucinają ją na krawędzi paddingu. scroll zawsze pokazuje paski przewijania, nawet gdy nic nie wystaje, a auto pokazuje je tylko w razie potrzeby, co niemal zawsze jest lepszym wyborem.
overflow to skrót dla overflow-x i overflow-y. Ustawienie jednej osi na visible, a drugiej na hidden nie działa tak, jak zapisano: w takim połączeniu przeglądarka oblicza visible jako auto, więc możesz zobaczyć nieoczekiwany pasek przewijania. Wyjątkiem jest clip, który można łączyć z visible.
Łamanie słów, które się nie mieszczą
overflow-wrap: break-word łamie długie słowa w razie potrzeby, ale nie pozwala polu skurczyć się poniżej najdłuższego słowa, więc nadal może wystawać w elementach flex i tabelach. overflow-wrap: anywhere obniża też ten minimalny rozmiar, dlatego naprawia długie adresy URL w wąskich panelach bocznych.
hyphens: auto wstawia łącznik na właściwej granicy sylaby w językach obsługiwanych przez przeglądarkę, dzięki czemu wyjustowany lub wąski tekst niemiecki i niderlandzki jest znacznie czytelniejszy. Niektóre wersje Safari rozumieją tylko -webkit-hyphens, więc zapisz oba. Użyj hyphens: manual i miękkiego łącznika ­, gdy chcesz sam wybrać miejsca podziału.
Przycinanie a dostępność
Ucięty tekst nadal jest na stronie, więc czytniki ekranu odczytują go w całości, co jest dobre. Tracą widzący użytkownicy klawiatury i ekranów dotykowych, ponieważ nie mogą najechać kursorem, aby zobaczyć podpowiedź.
W przypadku nazw produktów lub ważnych wiadomości daj możliwość rozwinięcia tekstu, na przykład przycisk Pokaż więcej lub element details, zamiast polegać tylko na wielokropku. Line clamp zostaw dla podglądów, w których pełny tekst jest o jedno kliknięcie dalej.
Porównanie wartości overflow
Co robi każda wartość overflow
Wartość
Nadmiar treści
Paski przewijania
Kontener przewijania?
Tailwind
Maluje się poza polem
Nigdy
Nie
Ucięty na krawędzi paddingu
Nigdy
Tak (przewijany przez skrypt)
Ucięty
Nigdy
Nie
Przewija się
Zawsze widoczne
Tak
Przewija się
Tylko w razie potrzeby
Tak
Wielokropek w jednej linii
Przepis na wielokropek w trzech liniach kodu
Usuń którąkolwiek z trzech deklaracji, a kropki znikną. Atrybut title zachowuje dostęp do pełnego tekstu.
Wielokropek wewnątrz wiersza flex
Środkowy element dostaje min-width: 0, aby mógł skurczyć się poniżej szerokości swojego tekstu. Bez tego zamiast tego wystaje cały wiersz.
Przycinanie do wielu linii
Przytnij opis karty do trzech linii
Poniższy wzorzec z prefiksem jest szeroko obsługiwany. Zwykła deklaracja line-clamp jest dodana dla przeglądarek, które już ją obsługują.
word-break vs overflow-wrap vs hyphens
Łamanie długich słów
Deklaracja
Gdzie łamie
Do czego
Tailwind
overflow-wrap: break-word
Wewnątrz słowa tylko wtedy, gdy by wystawało
Tekst główny z pojedynczym długim słowem
overflow-wrap: anywhere
Tak samo i pozwala polu się kurczyć
Adresy URL w elementach flex i wąskich kolumnach
wrap-anywhere (v4.1)
word-break: break-all
Między dowolnymi literami, zawsze
Kod, hashe, identyfikatory
word-break: keep-all
Nigdy wewnątrz słów CJK
Chiński, japoński, koreański
hyphens: auto
Na sylabach, z łącznikiem
Wąski lub wyjustowany tekst z ustawionym lang
Ten sam URL z czterema ustawieniami łamania
Każde pole ma 160px szerokości. Tylko ostatnie może wystawać.
Przycinanie komórek tabeli
Stały układ tabeli z komórkami z wielokropkiem
table-layout: fixed sprawia, że szerokości kolumn wygrywają z treścią, więc wielokropek może zadziałać.
Długi URL
Niemieckie złożenie
Akapit
Świeże ziarna kawy są palone w każdy wtorek i wysyłane tego samego popołudnia, więc docierają pod większość adresów w ciągu trzech dni od palenia, gdy smak jest wciąż najlepszy.
Sam wielokropek potrzebuje white-space: nowrap (lub line clamp).
Wielokropek wymaga overflow ustawionego na hidden lub clip.
Line clamp potrzebuje overflow: hidden, aby uciąć resztę.