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

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

Değerler

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:

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

Результат:

Örnek . overflow Özelliğini Ekleyelim

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

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

Результат:

Ö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:

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

Результат:

Ö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:

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

Результат:

Ö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:

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

Результат:

Ö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:

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

Результат:

Örnek . Yüzde Olarak Genişlik

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

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

Результат:

Ayrıca Bakınız