Savybė text-overflow

Savybė text-overflow prideda daugtaškį nukirinto teksto pabaigoje kaip ženklą, kad tekstas netilpo į bloką ir buvo nukirintas.

Kad savybė veiktų, tekstas turi būti nukirintas naudojant savybę overflow arba savybę overflow-x reikšmėje hidden, auto arba scroll. Jei nustatyta visible (o taip yra pagal nutylėjimą) - text-overflow neveiks.

Sintaksė

cssselektorius {
  text-overflow: ellipsis | clip;
}

Reikšmės

Reikšmė pagal nutylėjimą: clip.

Pavyzdys . Išsikišantis tekstas

Šiame pavyzdyje labai ilgas žodis netilps į konteinerį ir išsikiš už jo ribų. Nukirpimo neįvyks:

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

Результат:

Pavyzdys . Pridėkime savybę overflow

Dabar viskas, kas išsikišo už konteinerio ribų, bus tiesiog nukirpta:

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

Результат:

Pavyzdys . Reikšmė ellipsis

Dabar, papildomai prie savybės overflow, pridėsime ir text-overflow reikšmėje ellipsis. Nukirptam tekstui bus pridėtas daugtaškis pabaigoje:

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

Результат:

Pavyzdys . Su slinkimo juostomis

Jei nustatyti overflow: auto ir text-overflow: ellipsis, tuomet atsiras slinkimo juosta, bet daugtaškis vis tiek bus pridėtas. Pabandykite paslinkti slinkimo juostą pavyzdyje:

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

Результат:

Pavyzdys . Jei nėra labai ilgų žodžių

Jei nėra tų ilgų žodžių, kad jie išsikištų už konteinerio ribų, tuomet nukirpimo neįvyks (niekas gi neišsikiša). Pažiūrėkite šį pavyzdį:

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

Результат:

Pavyzdys . Tekstas vienoje eilutėje

Tačiau būna situacijų, kai mes norime, kad tekstas būtų nukirptas, jei jis per ilgas (apskritai tekstas, o ne atskiri žodžiai) ir ne perkeltas į kitą eilutę. Tai daroma pridedant savybę white-space reikšmėje nowrap, kuri uždraus teksto perkėlimą į kitą eilutę. Pažiūrėkite į pavyzdį, dabar tekstas nukirpamas:

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

Результат:

Pavyzdys . Plotis procentais

Jei nustatyti bloko plotį %, tuomet nukirpimas taip pat veiks korektiškai:

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

Результат:

Taip pat žiūrėkite