A text-overflow tulajdonság

A text-overflow tulajdonság három pontot helyez a csonkolt szöveg végére, jelezve, hogy a szöveg nem fért el a blokkban és csonkolva lett.

A tulajdonság működéséhez a szövegnek csonkoltnak kell lennie a overflow tulajdonság vagy a overflow-x tulajdonság hidden, auto vagy scroll értéke által. Ha visible érték van beállítva (ez az alapértelmezés) - a text-overflow nem fog működni.

Szintaxis

szelektor {
	text-overflow: ellipsis | clip;
}

Értékek

Érték	Leírás
`ellipsis`	Három pontot helyez a csonkolt szöveg végére.
`clip`	Nem helyez három pontot a végére (ez az alapértelmezett érték, a tulajdonság hatásának megszüntetésére szolgál, ha szükséges).

Alapértelmezett érték: clip.

Példa . Kilógó szöveg

Ebben a példában egy nagyon hosszú szó nem fog elférti a tárolóban és kilóg annak határain. Nem történik csonkolás:

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

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

Példa . Adjuk hozzá az overflow tulajdonságot

Most minden, ami kilóg a tároló határain, egyszerűen csonkolódni fog:

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

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

Példa . Az ellipsis érték

Most a overflow tulajdonság mellett hozzáadunk egy text-overflow tulajdonságot is ellipsis értékkel. A csonkolt szöveg végére három pont kerül:

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

Példa . Görgetősávval

Ha beállítjuk az overflow: auto és text-overflow: ellipsis értékeket, akkor megjelenik a görgetősáv, de a három pont továbbra is hozzáadódik. Próbálja meg görgetni a görgetősávot a példában:

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

Példa . Ha nincs nagyon hosszú szó

Ha nincs olyan hosszú szó, amely kilógna a tároló határain, akkor nem történik csonkolás (hiszen semmi sem lóg ki). Nézze meg a következő példát:

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

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

Példa . Szöveg egyetlen sorban

Vannak azonban olyan helyzetek, amikor azt szeretnénk, hogy a szöveg csonkolódjon, ha túl hosszú (a szöveg egésze, nem csak az egyes szavak), és ne törjedjen át a következő sorra. Ezt a white-space tulajdonság hozzáadásával érjük el nowrap értékkel, amely megtiltja a szöveg másik sorba történő áthordását. Nézze meg a példát, most a szöveg csonkolódik:

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

Példa . Szélesség százalékban

Ha a blokk szélességét %-ban adjuk meg, akkor a csonkolás szintén megfelelően fog működni:

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

Lásd még

a word-break és a overflow-wrap tulajdonságok,
amelyek lehetővé teszik egy hosszú szó betűinek új sorba helyezését
a hyphens tulajdonság,
amely bekapcsolja a szavak szótagolás szerinti elválasztását
a overflow tulajdonság,
amely csonkolja a blokk határain kilógó részeket