Svojstvo text-overflow

Svojstvo text-overflow dodaje tačkice na kraju skraćenog teksta kao znak da tekst nije stao u blok i bio je skraćen.

Da bi svojstvo radilo, tekst mora biti skraćen pomoću svojstva overflow ili svojstva overflow-x sa vrednošću hidden, auto ili scroll. Ako je postavljeno visible (a to je podrazumevana vrednost) - text-overflow neće raditi.

Sintaksa

cssselektor {
  text-overflow: ellipsis | clip;
}

Vrednosti

Podrazumevana vrednost: clip.

Primer . Tekst koji izlazi

U ovom primeru veoma duga reč neće stati u kontejner i izaći će preko njegovih granica. Skraćivanja neće biti:

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;
}

Результат:

Primer . Dodajmo svojstvo overflow

Sada će sve što izađe preko granica kontejnera biti prosto odsečeno:

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;
}

Результат:

Primer . Vrednost ellipsis

Sada ćemo, pored svojstva overflow dodati i text-overflow sa vrednošću ellipsis. Skraćenom tekstu će se dodati tačkice na kraju:

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;
}

Результат:

Primer . Sa trakama za pomeranje (scroll bar)

Ako postavite overflow: auto i text-overflow: ellipsis, pojaviće se traka za pomeranje, ali će tačkice i dalje biti dodate. Pokušajte da pomaknete traku za pomeranje u primeru:

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;
}

Результат:

Primer . Ako nema veoma dugih reči

Ako nema toliko dugih reči da bi izašle preko granice kontejnera, onda skraćivanje neće biti izvršeno (ništa ne izlazi). Pogledajte sledeći primer:

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;
}

Результат:

Primer . Tekst u jednom redu

Međutim, postoje situacije kada želimo da tekst bude skraćen, ako je previše dugačak (tekst uopšte, a ne pojedinačne reči) i da se ne prelama u sledeći red. Ovo se postiže dodavanjem svojstva white-space sa vrednošću nowrap, koje zabranjuje prelamanje teksta u drugi red. Pogledajte primer, sada je tekst skraćen:

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;
}

Результат:

Primer . Širina u procentima

Ako postavite širinu bloka u %, skraćivanje će takođe raditi ispravno:

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;
}

Результат:

Pogledajte takođe