Cara Menggunakan Properti CSS word-wrap

Properti word-wrap digunakan untuk menentukan apakah baris dapat memecah kata-kata yang terlalu panjang sehingga akan meluap wadah mereka dan yang tidak dapat dipecah secara default.

Apa bedanya dengan properti word-break? Nah, properti word-break memecah garis di antara dua karakter kata yang muncul di akhir baris ini, untuk membuat seluruh baris pas di dalam wadahnya. Tetapi properti pembungkus kata, memecah kata ketika kata itu sendiri mengambil seluruh baris dan meluap baris itu; yaitu, ketika kata itu sendiri dan dengan sendirinya terlalu panjang sehingga akan meluap wadahnya, jadi kami membuatnya hanya membungkus garis yang akan dibungkus baris agar muat di dalam wadahnya.

Properti word-wrap hanya memiliki efek ketika ruang putih memungkinkan pembungkus.

Properti word-wrap disebut overflow-wrap dalam spesifikasi CSS Text Level 3 (yang masih merupakan Draft Kerja sehingga semuanya dapat berubah).
Trivia & Catatan

Dua properti (word-break dan word-wrap) berbeda aturan dan limpahan kata: seperti yang disebutkan sebelumnya, kata-wrap digunakan untuk memecah kata-kata yang meluap wadah mereka, sementara properti kata-break memecah semua kata pada akhir baris, bahkan yang biasanya membungkus ke baris lain dan tidak akan meluap wadah mereka.

Tidak ada karakter tanda hubung yang dimasukkan pada titik istirahat kata. Karena itu, akan lebih bijaksana untuk menggunakan properti ini dalam hubungannya dengan properti tanda hubung.

Official Syntax

word-wrap: normal | break-word

 

Values

normal: baris hanya dapat terputus pada titik normal break point.

break-word: kata-kata yang biasanya tidak bisa pecah dapat dipatahkan pada titik-titik arbitrer jika tidak ada titik istirahat yang dapat diterima dalam garis.

 

Contoh

p {
    word-wrap: break-word;
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *