Właściwość text-overflow

Właściwość text-overflow dodaje wielokropek na końcu przyciętego tekstu na znak, że tekst nie mieścił się w bloku i został przycięty.

Aby właściwość działała, tekst musi być przycięty za pomocą właściwości overflow lub właściwości overflow-x z wartością hidden, auto lub scroll. Jeśli ustawione jest visible (a tak jest domyślnie) - text-overflow nie będzie działać.

Składnia

cssselektor {
  text-overflow: ellipsis | clip;
}

Wartości

Wartość domyślna: clip.

Przykład . Tekst wystający

W tym przykładzie bardzo długie słowo nie zmieści się w kontenerze i wystanie poza jego granice. Przycięcia nie następuje:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: visible;
  border: 1px solid red;
}

Результат:

Przykład . Dodajmy właściwość overflow

Teraz wszystko, co wystaje poza granice kontenera, po prostu się przyetnie:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  border: 1px solid red;
}

Результат:

Przykład . Wartość ellipsis

Teraz oprócz właściwości overflow dodamy jeszcze text-overflow z wartością ellipsis. Przyciętemu tekstowi doda się wielokropek na końcu:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Przykład . Z paskami przewijania

Jeśli ustawić overflow: auto i text-overflow: ellipsis, to pojawi się pasek przewijania, ale wielokropek nadal będzie dodany. Spróbuj przewinąć pasek przewijania w przykładzie:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: auto;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Przykład . Jeśli nie ma bardzo długich słów

Jeśli nie ma na tyle długich słów, aby wystawały poza granicę kontenera, to przycięcia nie nastąpi (nic nie wystaje). Spójrz na następujący przykład:

html<div id="elem">
  Lorem ipsum dolor sit amet adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Przykład . Tekst w jednej linii

Jednak zdarzają się sytuacje, gdy chcemy, aby tekst był przycinany, jeśli jest zbyt długi (tekst w ogóle, a nie pojedyncze słowa) i nie był przenoszony do następnej linii. Robi się to poprzez dodanie właściwości white-space z wartością nowrap, która zabroni przenoszenia tekstu do innej linii. Spójrz na przykład, teraz tekst jest przycinany:

html<div id="elem">
  Lorem ipsum dolor sit amet adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Przykład . Szerokość w procentach

Jeśli ustawić szerokość bloku w %, to przycinanie również będzie działać poprawnie:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Zobacz też