text-overflow Özelliği

text-overflow özelliği, metnin blok içine sığmadığını ve kırpıldığını göstermek için kırpılan metnin sonuna üç nokta ekler.

Özelliğin çalışması için metnin, overflow özelliği veya overflow-x özelliği ile hidden, auto veya scroll değerlerinden biri kullanılarak kırpılması gerekir. Eğer visible değeri ayarlanmışsa (varsayılan değer budur) - text-overflow çalışmaz.

Sözdizimi

seçici {
	text-overflow: ellipsis | clip;
}

Değerler

Değer	Açıklama
`ellipsis`	Kırpılan metnin sonuna üç nokta ekler.
`clip`	Sonuna üç nokta eklemez (varsayılan değerdir, gerektiğinde özelliğin etkisini kaldırmak için kullanılır).

Varsayılan değer: clip.

Örnek . Taşan Metin

Bu örnekte, çok uzun bir kelime konteynere sığmayacak ve sınırlarının dışına taşacaktır. Herhangi bir kırpma olmaz:

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

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

Örnek . overflow Özelliğini Ekleyelim

Şimdi, konteynerin sınırlarının dışına taşan her şey basitçe kırpılacak:

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

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

Örnek . ellipsis Değeri

Şimdi, overflow özelliğine ek olarak, text-overflow özelliğini de ellipsis değeriyle ekleyelim. Kırpılan metnin sonuna üç nokta eklenecek:

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

Örnek . Kaydırma Çubuklarıyla

Eğer overflow: auto ve text-overflow: ellipsis ayarlanırsa, bir kaydırma çubuğu görünecek, ancak üç nokta yine de eklenecektir. Örnekte kaydırma çubuğunu kaydırmayı deneyin:

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

Örnek . Eğer Çok Uzun Kelimeler Yoksa

Eğer konteynerin sınırlarının dışına taşacak kadar uzun kelimeler yoksa, kırpma gerçekleşmez (çünkü hiçbir şey taşmıyor). Aşağıdaki örneğe bakın:

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

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

Örnek . Tek Satırlık Metin

Ancak, metin çok uzunsa (genel olarak metin, tek tek kelimeler değil) kırpılmasını ve bir sonraki satıra taşınmamasını istediğimiz durumlar olur. Bu, metnin diğer satıra taşınmasını yasaklayan white-space özelliğinin nowrap değeriyle eklenmesiyle yapılır. Örneğe bakın, artık metin kırpılıyor:

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

Örnek . Yüzde Olarak Genişlik

Bloğun genişliği % olarak ayarlanırsa, kırpma işlemi de doğru çalışacaktır:

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

Ayrıca Bakınız

Uzun bir kelimenin harflerini yeni bir satıra taşımaya izin veren word-break ve overflow-wrap özellikleri
Kelimelerin hecelere göre taşınmasını sağlayan hyphens özelliği
Bloğun sınırının dışına taşan parçaları kırpan overflow özelliği