Strona główna >CSS >Leksykon CSS – właściwości, selektory, funkcje >text-overflow

text-overflow

text-overflow: clip | ellipsis

Ustala, jak wyświetla się tekst, który wychodzi poza element: przy ellipsis na końcu pojawia się „…”. Działa tylko razem z overflow: hidden i z tekstem, który się nie zawija (white-space: nowrap).

Wartości

clip – domyślnie: tekst jest ucięty na krawędzi elementu.
ellipsis – ucięty tekst kończy się wielokropkiem „…”.

Wartość początkowa: clip. Dziedziczona: nie. Dotyczy: elementów blokowych.

Przykłady

Długa nazwa pliku w wąskiej kolumnie:

<p class="name">bardzo-dluga-nazwa-pliku-ze-zdjeciem-z-wakacji-2026.jpg</p>
<p class="name" title="Pełna nazwa w podpowiedzi">Długa nazwa produktu, która nie mieści się w całym wierszu</p>

.name {
  width: 220px;
  margin: 0 0 6px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Wynik

bardzo-dluga-nazwa-pliku-ze-zdjeciem-z-wakacji-2026.jpg

Długa nazwa produktu, która nie mieści się w całym wierszu

Na co uważać

Bez overflow: hidden (albo clip) i white-space: nowrap nic się nie stanie. Element potrzebuje ograniczonej szerokości – we Flexboksie często także min-width: 0.
Do skracania na kilka wierszy służy -webkit-line-clamp.
Skrócony tekst jest w całości w HTML i czytniki ekranu go odczytują; pokaż go też widzącym użytkownikom, np. w atrybucie title albo po rozwinięciu.
Na elementy liniowe nie działa; span potrzebuje display: block albo inline-block.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: działa we wszystkich popularnych przeglądarkach, i to od dawna (najpóźniej od 2015 roku). Od wersji: Chrome 1, Firefox 7, Safari 1.3. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
overflow
white-space
line-clamp i -webkit-line-clamp
min-width