Spasi kata - Trik CSS

Anonim

The word-spacingproperti ini mirip dengan letter-spacing, meskipun secara alami penggunaannya mengatur jumlah ruang antara kata-kata dalam sepotong teks, bukan karakter individu.

p ( word-spacing: 2em; )

word-spacing dapat menerima tiga nilai berbeda:

  1. kata kunci "normal", yang menyetel ulang spasi default
  2. nilai panjang menggunakan unit CSS apa pun (paling umum px, em, rem)
  3. kata kunci "mewarisi", yang menerapkan word-spacingelemen induk

Praktik terbaik saat ini adalah menggunakan em. Ukuran font dapat disesuaikan, jadi menggunakan piksel untuk ini dapat menyebabkan masalah pada jarak antar kata tidak akan diskalakan seperti ukurannya. rembiasanya bagus, tetapi dukungan browser lebih rendah dan dalam kasus penggunaan ini mungkin yang terbaik adalah spasi relevan langsung dengan kata yang diterapkan, bukan root.

Penting untuk dicatat bahwa "kata" dalam konteks ini sebenarnya merujuk pada bagian tunggal dari konten sebaris-yang berarti yang word-spacingmempengaruhi inline-blockelemen serta inlineelemen. Dalam contoh ini, beberapa elemen diberi jarak dengan menyetel word-spacingpenampung induknya:

Lihat Pena ini!

Tempat Menarik

  • The word-spacingproperti animatable dengan CSS Transisi.
  • Meskipun penggunaan nilai "persentase" untuk menentukan jarak diizinkan sesuai spesifikasi, hal itu dapat menghasilkan hasil yang tidak dapat diprediksi - seringkali tidak berpengaruh sama sekali.
  • Menyetel white-space ke nol merupakan salah satu cara untuk melawan spasi antar elemen blok sebaris.

Dukungan Browser

Chrome Safari Firefox Opera YAITU Android iOS
Bekerja Bekerja Bekerja Bekerja Bekerja Paling Bekerja

Catatan tentang dukungan browser Android: Sebagian besar perangkat Android mendukung word-spacing-tetapi, beberapa perangkat yang menggunakan Webkit non-Apple atau browser Netfront tidak. Secara spesifik dirinci dalam tautan QuirksMode di atas.