Przejdź do treści

CSS / Rozmiary

Przepełnienie tekstu {text-overflow}

Co zrobić, kiedy tekst nie mieści się w ustalonej szerokości elementu na stronie?

(CSS 3 - interpretuje Internet Explorer * , Firefox, Opera, Chrome)

selektor { text-overflow: sposób }
Selektorem może być znacznik wyświetlany w bloku [zobacz: Wstawianie stylów].

Jako "sposób" należy podać:
  • clip - niemieszczący się tekst i elementy inline zostaną przycięte (domyślnie)
  • ellipsis - na końcu przyciętych linijek zostanie wstawiony wielokropek, tzn. pojedynczy znak: "" albo w ostateczności trzy znaki kropki: "..."

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ł

* MSIE od wersji 8 obsługuje "text-overflow: ellipsis" tylko w połączeniu z "white-space: nowrap". Co ciekawe we wcześniejszych wersjach nie ma tego problemu.

Przykład {text-overflow}

p {
	width: 3em;
}

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

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

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

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

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

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

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

Komentarze

Zobacz więcej komentarzy

Facebook