CSS text-wrap: güzel

Hızdan ziyade güzellik için optimize edilmiş metin kaydırmayı etkinleştirin.

Adam Argyle

Chrome 117'den itibaren yeni bir metin kaydırma özelliğini kullanabilirsiniz: text-wrap: pretty CSS Metin Düzeyi 4'ten.

p {
  text-wrap: pretty;
}

https://codepen.io/web-dot-dev/pen/yLGmzLJ

Tipografik dullar ve yetimler bekardır Bir paragrafın veya metin blokunun sonunda tek başına duran kelimeler. Dullar kelimedir tek başına metin bloğunun sonunda ve artıklar metnin sonunda tek başınadır engelleyebilirsiniz. Metne göz atarken gözlerimiz arasında bölünüp içeriği zorlaştırabilir. okudu. Bazı tasarımcılar ne pahasına olursa olsun bunlardan kaçınır ve ürünü teslim etmek için onları engellemiş olursunuz.

Resim kaynağı Google Fonts—Widows ve Yetimler

Chrome 117'den itibaren, artıkları tek bir CSS satırıyla kaçınabilirsiniz: text-wrap: pretty.

Not: text-wrap: pretty, CSS'nin orphans mülkü Bu, özellikle CSS çok sütunlu düzen'e dokunun. Ayrıca pretty, dullarla değil, yalnızca yetimlerle ilgilenir.

Bu özellik, paragrafların tek bir metinle bitmemesini sağlamaktan Ancak, art arda kısa çizgiyle ayrılmış satırlar göründüğünde de kısa çizgiyi ayarlar. sonuna ekler veya yer açmak için önceki satırları düzenler. Ayrıca, uygun şekilde düzenlemenizi sağlar. text-wrap: pretty, şu içindir: genel olarak daha iyi satır kaydırma ve metin kırma özellikleri geliştirildi. Şu anda yetimlere odaklanıldı. text-wrap: pretty ileride daha fazla iyileştirme sunabilir.

Resim, Gövde metninizdeki artıkları neden kaldırmalısınız? başlıklı makaleden alınmıştır.

Bir de text-wrap: balance var. ancak metinlerin sürüklenme hissi uyandıracak şekilde uyumlu metin bloğudur. Şahsen başlıklar için balance ve pretty ürünlerini kullanıyorum. paragraflar halinde)

Veri analizini belirlemek için kullanılan algoritmanın ayrıntılarıyla veya performans ile ilgili dikkat edilmesi gereken noktalar varsa mühendisin oluşturduğu tasarım dokümanına ait bağlantıyı burada bulabilirsiniz Koji Ishii'yi tanıttık.

Başka satır sonu iyileştirmeleri veya önerileriniz varsa öğrenmekten memnuniyet duyarız. ! Chromium hata izleyiciye ayrıntılarıyla ve örneklerle Ayrıca, size dönüş yapacağız.