Przepełnienie tekstu - CSS-Tricks

text-overflowNieruchomość w CSS dotyczy sytuacji, w których tekst jest obcięty, kiedy przelewa pole elementu. Można go przyciąć (tj. 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ę).

.ellipsis ( text-overflow: ellipsis; /* Required for text-overflow to do anything */ white-space: nowrap; overflow: hidden; )

Należy pamiętać, że text-overflowtylko wtedy, gdy pojemnik jest overflowwłaściwość ma wartość hidden, scrolllub autoi white-space: nowrap;.

Przepełnienie tekstu może wystąpić tylko na elementach blokowych lub blokowych, 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 text-overflowwłaściwości, w tym wszystkie możliwe wartości. Obsługa przeglądarek jest różna!

Sprawdź ten długopis!

Ustawianie overflowsię scrolllub autowyświetli paski przewijania, aby odsłonić dodatkowy tekst, natomiast hiddennie będzie. Ukryty tekst można zaznaczyć, wybierając wielokropki.

Starocie

Stara wersja specyfikacji mówi, że można użyć adresu URL do obrazu dla wielokropka, ale wygląda na to, że został on usunięty.

Istnieje np. Składnia dwuwartościowa text-overflow: ellipsis ellipsis;, która kontroluje 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, podobnie jak zdefiniowanie łańcucha, jest „zagrożone”.

Nie jestem pewien, skąd się ellipsis-wordwziął. Nie ma tego w specyfikacji ani w żadnej innej dokumentacji poza WebPlatform.org.

text-overflowNieruchomość kiedyś skrótem kombinacji text-overflow-modei text-overflow-ellipsis, nie dłużej jednak i te odrębne właściwości nie istnieje.