Sözcük aralığı - CSS Hileleri

Anonim

word-spacingMülkiyet benzer letter-spacingdoğal olarak kullanılması metnin bir parçası değil, karakterleri ayrı ayrı sözcükler arasında boşluk miktarını düzenleyen olsa.

p ( word-spacing: 2em; )

word-spacing üç farklı değer alabilir:

  1. varsayılan aralığı sıfırlayan "normal" anahtar kelime
  2. herhangi bir CSS birimi kullanan uzunluk değerleri (en yaygın olarak px, em, rem)
  3. word-spacingüst öğenin geçerli olan "devralma" anahtar sözcüğü

Şu anda en iyi uygulama kullanmak olacaktır em. Yazı tipi boyutu ayarlanabilir, bu nedenle bunun için piksellerin kullanılması, sözcükler arasındaki boşlukların boyutlarına göre ölçeklenmemesi sorunlarına neden olabilir. remgenellikle harikadır, ancak tarayıcı desteği daha düşüktür ve bu kullanım durumunda muhtemelen en iyisidir, boşluk kökle değil, doğrudan uygulandığı sözcüklerle ilgilidir.

Bu bağlamda "kelimenin" aslında tek bir satır içi içeriğe atıfta bulunduğuna dikkat etmek önemlidir - bu, öğeleri olduğu kadar öğeleri de word-spacingetkileyen anlamına gelir . Bu örnekte, bu tür birkaç eleman, üst kapsayıcılarının ayarlanmasıyla aralıklıdır :inline-blockinlineword-spacing

Bu Kaleme bakın!

İlgi noktaları

  • word-spacingMülkiyet CSS Geçişleri Olan canlandırılabilir olduğunu.
  • Spesifikasyona göre aralığı belirlemek için "yüzde" değerinin kullanımına izin verilirken, tahmin edilemeyen sonuçlar doğurabilir - çoğu zaman hiçbir etkisi yoktur.
  • Beyaz boşluğu sıfıra ayarlamak, satır içi blok öğeleri arasındaki boşluğa karşı savaşmanın yollarından biridir.

Tarayıcı Desteği

Krom Safari Firefox Opera IE Android iOS
İşler İşler İşler İşler İşler Çoğu İşler

Android tarayıcı desteğiyle ilgili bir not: Android cihazların büyük çoğunluğu desteklemektedir - word-spacingancak, Webkit'in Apple olmayan yapılarını veya Netfront tarayıcısını kullanan bazı cihazlar desteklemez . Özellikler yukarıdaki QuirksMode bağlantısında detaylandırılmıştır.