Właściwość text-overflow w CSS radzi sobie z sytuacjami, w których tekst jest przycinany, gdy przepełnia pole elementu. Można go przyciąć (np. Uciąć, ukryć), wyświetlić wielokropek („…”, wartość zakresu Unicode U + 2026) lub wyświetlić ciąg zdefiniowany przez autora (brak obecnie obsługi ciągów zdefiniowanych przez przeglądarkę).
Zwróć uwagę, że text-overflow występuje tylko wtedy, gdy właściwość overflow kontenera ma wartość hidden, scroll lub auto i white-space: nowrap;.
Przepełnienie tekstu może wystąpić tylko w przypadku elementów blokowych lub śródliniowych, ponieważ element musi mieć szerokość, aby został przepełniony. Przepełnienie następuje w kierunku określonym przez właściwość kierunku lub powiązane atrybuty.
Poniższe demo przedstawia zachowanie właściwości text-overflow, w tym wszystkie możliwe wartości. Obsługiwane przeglądarki są różne!
Ustawienie overflow do scroll lub auto wyświetli paski przewijania, aby pokazać dodatkowy tekst, natomiast hidden nie. Ukryty tekst można zaznaczyć, wybierając wielokropek.
Stare rzeczy
Stara wersja specyfikacji mówi, że można użyć adresu URL do obrazu dla wielokropka, ale wygląda to tak jeśli to zostało usunięte.
Istnieje składnia dwuwartościowa, np text-overflow: ellipsis ellipsis;, który kontrolowałby przepełnienie po lewej i prawej stronie tego samego kontenera. Nie jestem pewien, jak byłoby to możliwe do osiągnięcia. Może wyśrodkowany tekst w zbyt małym pojemniku? Nowa specyfikacja mówi, że to, poza zdefiniowaniem ciągu, jest „zagrożone”.
Nie jestem pewien, skąd pochodzi ellipsis-word. Nie ma go w specyfikacja lub dokumentacja inna niż na WebPlatform.org.
Właściwość text-overflow była kiedyś skrótem dla kombinacji text-overflow-mode i text-overflow-ellipsis, ale już nie jest i te oddzielne właściwości nie istnieją.
Powiązane właściwości
-
white-space -
overflow -
word-break -
width