Przepełnienie tekstu {text-overflow}

CSS 3

selektor { text-overflow: sposób }

Normalnie w języku CSS nawet jeśli ustalimy szerokość elementu, ale następnie umieścimy w nim szerszy tekst - np. blokując jego zawijanie przy pomocy stylu "white-space: nowrap" albo znajdzie się w nim jakiś wyjątkowo długi wyraz - to taki tekst i tak wyjdzie poza obręb elementu. Oczywiście nie będzie to wyglądało zbyt estetycznie, a czasem może nawet zupełnie popsuć układ całej strony. Ponieważ często nie wiadomo z góry, jak długi może być tekst na stronie - bo powstanie on dopiero później - dlatego aby zabezpieczyć się na taką okoliczność, zwykle ukrywa się nadmiarową zawartość przy pomocy stylu "overflow: hidden" albo "overflow: auto". Kłopot w tym, że wtedy użytkownik może się w ogóle nie zorientować, że tekst został przycięty - zwłaszcza jeśli litery ułożą się w taki sposób, że żaden wyraz nie zostanie ucięty w środku. W takiej sytuacji znacznie lepiej by było wstawić na końcu wiersza wielokropek, który pozwoli czytelnikowi uniknąć nieporozumień. Oczywiście wielokropka nie możemy tam wstawić ręcznie, ponieważ nigdy nie wiadomo, jak się ułoży tekst na stronie (różne rozdzielczości ekranu, kroje i ustawienia wyświetlania czcionek).

Właśnie na taką okoliczność została stworzona deklaracja "text-overflow: ellipsis". Jeśli ją zastosujemy np. do akapitu, przeglądarka sama wstawi wielokropek, kiedy będzie to konieczne. Warto przy tym wiedzieć o bardzo wygodnym zachowaniu przeglądarek. Jeśli zaznaczymy myszką tak skrócony tekst, a następnie skopiujemy go do schowka systemowego, to znajdzie się tam pełna postać tekstu - ze wszystkimi wyrazami, ale bez wstawionych automatycznie wielokropków. Trzeba jednak również pamiętać o kilku ograniczeniach. Wielokropek nie zostanie automatycznie wstawiony w następujących przypadkach:

• kiedy wewnątrz elementu znajdują się inne elementy blokowe
• jeśli ustalimy wysokość elementu, a tekstu nawet po zawinięciu będzie za dużo, aby się tam zmieścił

* Niektóre starsze przeglądarki mogą obsługiwać "text-overflow: ellipsis" tylko w połączeniu z "white-space: nowrap".

Przykład {text-overflow}

📋 Zaznacz kod ▶ Edytuj na żywo

p {
	width: 3em;
}

Za długie wyrazy w tym akapicie powinny wychodzić poza jego obręb.

📋 Zaznacz kod ▶ Edytuj na żywo

p {
	width: 3em;
	overflow: hidden;
}

Za długie wyrazy w tym akapicie powinny zostać przycięte.

📋 Zaznacz kod ▶ Edytuj na żywo

p {
	width: 3em;
	overflow: hidden;
	text-overflow: ellipsis;
}

Na końcu za długich wyrazów w tym akapicie powinny zostać wstawione wielokropki.

📋 Zaznacz kod ▶ Edytuj na żywo

p {
	width: 15em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

Na końcu tekstu w tym akapicie powinien zostać wstawiony wielokropek.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari	Poziom wsparcia min. 2,5 roku
text-overflow: wartość	1 2008-12-11	7 2011-09-27	12 2015-07-29	11 2010-12-16	1.3 2005-04-15	100%
text-overflow: clip	1 2008-12-11	7 2011-09-27	12 2015-07-29	15 2013-07-02	1.3 2005-04-15	100%
text-overflow: ellipsis	1 2008-12-11	7 2011-09-27	12 2015-07-29	15 2013-07-02	1.3 2005-04-15	100%