Lastnost text-overflow

Lastnost text-overflow doda tripičje na konec okrnjenega besedila v znak, da se besedilo ni umestilo v blok in je bilo okrnjeno.

Za delovanje lastnosti mora biti besedilo okrnjeno prek lastnosti overflow ali lastnosti overflow-x v vrednosti hidden, auto ali scroll. Če je nastavljeno visible (kar je privzeto) - text-overflow ne bo delovala.

Sintaksa

cssselektor {
  text-overflow: ellipsis | clip;
}

Vrednosti

Privzeta vrednost: clip.

Primer . Besedilo, ki štrli ven

V tem primeru se zelo dolga beseda ne bo umestila v vsebnik in bo štrlela preko njegovih meja. Do okrnitve ne pride:

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 lastnost overflow

Trenutno se bo vse, kar štrli preko meja vsebnika, preprosto odrezalo:

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

Trenutno bomo poleg lastnosti overflow dodali še text-overflow v vrednosti ellipsis. Okrnjenemu besedilu se bo dodalo tripičje na koncu:

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 . Z drsnimi trakovi

Če nastavimo overflow: auto in text-overflow: ellipsis, se bo pojavil drsni trak, vendar bo tripičje še vedno dodano. Poskusite pomikati drsni trak v 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 . Če ni zelo dolgih besed

Če ni tako dolgih besed, da bi štrlele preko meja vsebnika, do okrnitve ne bo prišlo (nič ne štrli ven). Oglejte si naslednji 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 . Besedilo v eno vrstico

Vendar pa obstajajo situacije, ko želimo, da se besedilo okrajša, če je preveč dolgo (besedilo na splošno, ne posamezne besede) in se ne prelomi v naslednjo vrstico. To naredimo z dodajanjem lastnosti white-space v vrednosti nowrap, ki prepove prelamljanje besedila v drugo vrstico. Oglejte si primer, zdaj se besedilo okrajša:

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 v odstotkih

Če nastavimo širino bloka v %, bo okrajšanje prav tako delovalo pravilno:

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

Результат:

Glejte tudi