Kurs HTML

Wprowadzenie: Sygnalizowanie ukrytego tekstu

Gdy używamy overflow: hidden; (lub scroll/auto) do ukrycia treści, która nie mieści się w elemencie, użytkownik może nie wiedzieć, że część treści jest niewidoczna, zwłaszcza jeśli nie ma pasków przewijania.

Właściwość text-overflow w CSS pozwala **wizualnie zasygnalizować**, że tekst został obcięty w poziomie. Działa ona tylko wtedy, gdy spełnione są określone warunki, przede wszystkim gdy tekst przepełnia swój kontener w poziomie i to przepełnienie jest ukrywane.

Kluczowe wymagania dla text-overflow:

• Element musi mieć ustawione overflow: hidden; (lub scroll/auto, ale efekt jest widoczny tylko dla ukrytej części).
• Element musi mieć ustawione white-space: nowrap; (lub inną właściwość zapobiegającą zawijaniu tekstu, np. w komórkach tabeli).
• Element musi być elementem blokowym lub inline-block z określoną szerokością (lub max-width).

text-overflow dotyczy tylko przepełnienia w **linii tekstu (w poziomie)**, nie działa dla przepełnienia pionowego.

Wartości text-overflow

Właściwość text-overflow przyjmuje głównie dwie wartości:

• clip: (Domyślne) Tekst jest po prostu **obcinany** na granicy kontenera. Nie jest dodawany żaden wizualny wskaźnik obcięcia.
• ellipsis: Wyświetla **wielokropek (...)** na końcu widocznej części tekstu, aby zasygnalizować, że dalsza część została ukryta. Przeglądarka stara się umieścić wielokropek tak, aby zmieścił się w kontenerze.
• Istnieje też możliwość podania własnego ciągu znaków (np. text-overflow: '--';), ale wsparcie dla tej funkcji jest bardzo ograniczone i niezalecane.

<p class="text-example clip-example">Bardzo długi tekst, który zostanie obcięty.</p>
<p class="text-example ellipsis-example">Bardzo długi tekst, który zostanie obcięty z wielokropkiem.</p>Kopiuj

.text-example {
  width: 200px; /* Ograniczona szerokość */
  border: 1px solid gray;
  padding: 5px;
  margin-bottom: 10px;

  /* Wymagane dla text-overflow: */
  overflow: hidden;
  white-space: nowrap;
}

.clip-example {
  text-overflow: clip; /* Domyślne - tekst po prostu ucięty */
}

.ellipsis-example {
  text-overflow: ellipsis; /* Tekst ucięty z wielokropkiem (...) */
}
Kopiuj

W powyższym przykładzie, oba paragrafy będą miały obcięty tekst, ale drugi paragraf dodatkowo wyświetli wielokropek na końcu widocznej części.

Zastosowania

text-overflow: ellipsis; jest bardzo przydatne w interfejsach użytkownika, gdzie przestrzeń jest ograniczona:

• W komórkach tabel, aby zapobiec rozpychaniu kolumn przez długie wpisy.
• W listach plików, wiadomości, powiadomień, gdzie tytuły lub nazwy mogą być długie.
• W przyciskach lub elementach nawigacyjnych z dynamicznym tekstem.
• Wszędzie tam, gdzie chcemy elegancko zasygnalizować użytkownikowi, że widzi tylko część dłuższego tekstu.