Vlastnosť text-overflow

Vlastnosť text-overflow pridáva trojbodku na koniec skráteného textu ako znak toho, že text sa nezmestil do bloku a bol skrátený.

Aby vlastnosť fungovala, text musí byť skrátený prostredníctvom vlastnosti overflow alebo vlastnosti overflow-x s hodnotou hidden, auto alebo scroll. Ak je nastavené visible (čo je základná hodnota) - text-overflow nebude fungovať.

Syntax

cssselektor {
  text-overflow: ellipsis | clip;
}

Hodnoty

Predvolená hodnota: clip.

Príklad . Text prekračujúci okraje

V tomto príklade sa veľmi dlhé slovo nezmestí do kontajnera a prekročí jeho okraje. Ku skráteniu nedochádza:

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

Результат:

Príklad . Pridajme vlastnosť overflow

Teraz sa všetko, čo prekročilo okraje kontajnera, jednoducho skráti:

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

Результат:

Príklad . Hodnota ellipsis

Teraz okrem vlastnosti overflow pridáme aj text-overflow s hodnotou ellipsis. Skrátenému textu sa pridá trojbodka na koniec:

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

Результат:

Príklad . S posuvníkmi

Ak nastavíte overflow: auto a text-overflow: ellipsis, objaví sa posuvník, ale trojbodka bude stále pridaná. Skúste posunúť posuvník v príklade:

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

Результат:

Príklad . Ak nie sú veľmi dlhé slová

Ak nie sú také dlhé slová, aby prekračovali okraj kontajnera, ku skráteniu nedôjde (nič neprekračuje okraje). Pozrite si nasledujúci príklad:

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

Результат:

Príklad . Text v jednom riadku

Avšak existujú situácie, keď chceme, aby sa text skrátil, ak je príliš dlhý (text ako celok, nie jednotlivé slová) a ne zalomal sa na ďalší riadok. To sa dosiahne pridaním vlastnosti white-space s hodnotou nowrap, ktorá zakáže zalomenie textu na ďalší riadok. Pozrite si príklad, teraz sa text skracuje:

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

Результат:

Príklad . Šírka v percentách

Ak nastavíte šírku bloku v %, skrátenie bude tiež fungovať správne:

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

Результат:

Pozri tiež