text-overflow-ominaisuus

Ominaisuus text-overflow lisää ellipsin katkaistun tekstin loppuun merkiksi siitä, että teksti ei mahtunut blokkiin ja se katkaistiin.

Jotta ominaisuus toimisi, tekstin on oltava katkaistu ominaisuuden overflow tai ominaisuuden overflow-x avulla arvolla hidden, auto tai scroll. Jos on asetettu visible (mikä on oletusarvo) - text-overflow ei toimi.

Syntaksi

valitsija {
	text-overflow: ellipsis | clip;
}

Arvot

Arvo	Kuvaus
`ellipsis`	Lisää katkaistun tekstin loppuun ellipsin.
`clip`	Ei lisää ellipsiä loppuun (tämä on oletusarvo, tarvitaan ominaisuuden toiminnon peruuttamiseksi tarvittaessa).

Oletusarvo: clip.

Esimerkki . Yli menevän tekstin

Tässä esimerkissä erittäin pitkä sana ei mahdu säiliöön ja menee sen rajojen yli. Katkaisua ei tapahdu:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: visible;
	border: 1px solid red;
}

Esimerkki . Lisätään overflow-ominaisuus

Nyt kaikki, joka meni säiliön rajojen yli, katkaistaan:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	border: 1px solid red;
}

Esimerkki . Ellipsis-arvo

Nyt lisäksi overflow-ominaisuuteen lisätään myös text-overflow arvolla ellipsis. Katkaistuun tekstiin lisätään ellipsi loppuun:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Esimerkki . Vierityspalkeilla

Jos asetetaan overflow: auto ja text-overflow: ellipsis, niin vierityspalkki ilmestyy, mutta ellipsi lisätään edelleen. Kokeile vierittää vierityspalkkia esimerkissä:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: auto;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Esimerkki . Jos ei ole erittäin pitkiä sanoja

Jos ei ole niin pitkiä sanoja, että ne menisivät säiliön rajojen yli, niin katkaisua ei tapahdu (mikäänhän ei mene yli). Katso seuraavaa esimerkkiä:

<div id="elem">
	Lorem ipsum dolor sit amet adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Esimerkki . Teksti yhdellä rivillä

Kuitenkin on tilanteita, joissa haluamme, että teksti katkaistaan, jos se on liian pitkä (teksti yleensä, ei yksittäiset sanat) eikä sitä siirretä seuraavalle riville. Tämä tehdään lisäämällä ominaisuus white-space arvolla nowrap, joka kieltää tekstin siirtämisen toiselle riville. Katso esimerkkiä, nyt teksti katkaistaan:

<div id="elem">
	Lorem ipsum dolor sit amet adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Esimerkki . Leveys prosentteina

Jos asetetaan blokin leveys prosentteina, niin katkaisu toimii myös oikein:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 80%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Katso myös

ominaisuudet word-break ja overflow-wrap,
jotka mahdollistavat pitkän sanan kirjainten siirtämisen uudelle riville
ominaisuus hyphens,
joka mahdollistaa sanojen tavutuksen
ominaisuus overflow,
joka katkaisee blokin rajojen yli menevät osat