Vlastnost text-overflow

Vlastnost text-overflow přidává trojtečku na konec zkráceného textu jako znak toho, že text se nevešel do bloku a byl zkrácen.

Pro fungování vlastnosti musí být text zkrácen pomocí vlastnosti overflow nebo vlastnosti overflow-x s hodnotou hidden, auto nebo scroll. Pokud je nastaveno visible (což je výchozí hodnota) - text-overflow nebude fungovat.

Syntaxe

cssselektor {
  text-overflow: ellipsis | clip;
}

Hodnoty

Výchozí hodnota: clip.

Příklad . Text přesahující okraj

V tomto příkladu se velmi dlouhé slovo nevejde do kontejneru a přesáhne jeho hranice. Ke zkrácení nedochází:

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

Результат:

Příklad . Přidáme vlastnost overflow

Nyní se vše, co přesahuje hranice kontejneru, jednoduše ořízne:

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

Результат:

Příklad . Hodnota ellipsis

Nyní k vlastnosti overflow přidáme ještě text-overflow s hodnotou ellipsis. Ke zkrácenému textu se přidá trojtečka na konec:

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

Результат:

Příklad . S posuvníky

Pokud nastavíte overflow: auto a text-overflow: ellipsis, objeví se posuvník, ale trojtečka bude stále přidána. Zkuste v příkladu posunout posuvník:

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

Результат:

Příklad . Pokud nejsou velmi dlouhá slova

Pokud nejsou tak dlouhá slova, aby přesahovala hranici kontejneru, ke zkrácení nedojde (nic nepřesahuje). Podívejte se na následující pří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;
}

Результат:

Příklad . Text na jeden řádek

Existují však situace, kdy chceme, aby se text zkrátil, pokud je příliš dlouhý (text jako celek, ne jednotlivá slova) a nepřeléval se na další řádek. Toho se dosáhne přidáním vlastnosti white-space s hodnotou nowrap, která zakáže přelévání textu na další řádek. Podívejte se na příklad, nyní se text zkracuje:

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

Результат:

Příklad . Šířka v procentech

Pokud nastavíte šířku bloku v %, zkrácení bude také fungovat správně:

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

Результат:

Viz také