CSS'de Geniş Yazıyı Üç Nokta İle Sınırlandırma

Web tasarımı yaparken metinlerin görsel olarak düzgün ve estetik bir şekilde sunulması önemlidir. Özellikle uzun metinler söz konusu olduğunda, bunların sayfa düzenini bozmaması ve kullanıcı deneyimini olumsuz etkilememesi gerekir. Bu noktada CSS'de bulunan bazı özellikler devreye girer.

Html Dosyası

<p>Buraya biraz uzun bir yazı yazalım.</p>

Overflow ve Text-Overflow Özellikleri:

Bu yöntem, overflow özelliğini hidden olarak ayarlayarak metnin taşmasını engeller ve text-overflow özelliğini ellipsis olarak ayarlayarak metnin sonuna üç nokta (...) ekler.

p {
  width: 64px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

Webkit-Line-Clamp Özelliği:

Bu özellik, metnin kaç satırda gösterileceğini belirlemenize olanak tanır.

p {
  width: 64px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

Flexbox ve Justify-Content Özellikleri:

Bu yöntem, metinleri flex yapısında düzenlemenizi sağlar. justify-content ve space-between ile metnin sonuna üç nokta (...) eklemenize olanak tanır.

p {
  width: 64px;
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
}
 
p::after {
  content: '...';
}

Metinleri Üç Nokta İle Sınırlandırmanın Faydaları:

• Uzun metinleri kısaltarak sayfanın daha düzenli ve okunaklı görünmesini sağlar.
• Kullanıcıların aradıkları bilgiyi daha hızlı bulmasına yardımcı olur.
• Gereksiz kaydırmaları azaltarak kullanıcı deneyimini optimize eder.

Dikkat Edilmesi Gerekenler:

• Kullanılan yöntemin tarayıcı desteğini göz önünde bulundurmak önemlidir.
• Metnin font boyutu ve satır aralığı da sınırlama işlemini etkileyebilir.
• Üç nokta (...) karakterinin metnin anlamını bozmamasına dikkat edilmelidir.