Teks-justify - Trik CSS | CSS Almanak 2025

The text-justifyproperti di CSS adalah pendamping untuk text-alignproperti yang digunakan untuk mengatur metode pembenaran teks bila text-aligndiatur ke justifynilai.

p ( text-align: justify; text-justify: inter-word; )

Nilai

inter-word: Menentukan bahwa teks dibenarkan dengan menyesuaikan spasi antar kata, secara efektif membuat spasi kata tambahan. Ini secara efektif merupakan variasi dari word-spacingproperti.
inter-character: Menentukan bahwa teks dibenarkan dengan menyesuaikan jarak antar karakter, secara efektif membuat spasi karakter tambahan. Ini secara efektif merupakan variasi dari letter-spacingproperti.
auto: Memungkinkan browser menentukan apakah pembenaran ditangani dengan lebih baik sebagai inter-wordatau inter-character. Hal ini dapat membantu dalam skenario multibahasa di mana bahasa konten tidak diketahui hingga dirender, memungkinkan agen pengguna browser untuk memilih yang sesuai berdasarkan metode mana yang lebih cocok dengan konteks bahasa.
none: Menonaktifkan metode justifikasi, secara efektif menghapus peluang justifikasi, atau menimpa jika metode justifikasi dapat terjadi dalam kaskade.

Apa sebenarnya pembenaran itu?

Teks yang dibenarkan adalah cara yang bagus untuk mengatakan bagaimana teks mengisi kotak yang berisi itu. Faktanya, Anda mungkin sudah terbiasa dengan teks pembenaran dan bahkan tidak mengetahuinya. Jika Anda pernah menggunakan perangkat lunak pengedit teks seperti Word dan Google Docs, Anda mungkin sudah familiar dengan ikon-ikon ini:

Opsi perataan teks dan pembenaran di bilah alat Google Dokumen

Tiga yang pertama mengatur perataan teks, seperti text-alignproperti CSS , di mana teks dapat disejajarkan ke kiri, kanan, atau benar-benar di tengah.

Ikon keempat itu adalah opsi ratakan dan ini memberi tahu konten untuk mengisi seluruh lebar dokumen sehingga setiap baris rata tepat ke tepi, terlepas dari apakah itu memengaruhi jarak antar kata.

Membenarkan konten di Google Docs menambahkan spasi antar kata untuk memenuhi lebar dokumen penuh di setiap baris

The text-justifyproperti memungkinkan kita untuk melakukan hal yang sama, tetapi dengan fleksibilitas tambahan untuk menentukan apakah metode jarak digunakan untuk membenarkan konten yang dikelola antara kata atau karakter.

Dukungan Browser

The text-justifyproperti termasuk dalam CSS Text Modul Level 3 spesifikasi, yang saat ini dalam status Draft editor pada saat tulisan ini.

Properti ini saat ini terdaftar sebagai "berisiko" dibatalkan dalam periode Rekomendasi Kandidat. Oleh karena itu, tidak disarankan untuk menggunakan properti ini dalam produksi karena tidak mungkin diadopsi sebagai standar di semua browser dalam waktu dekat.

Dukungan saat ini terbatas pada Firefox 55+. Internet Explorer 11 dan Edge 14+ juga mendukung properti, tetapi hanya inter-wordnilai serta nilai tidak resmi yang tidak termasuk dalam spesifikasi W3C.

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.