Tag wbr
Tag wbr menunjukkan tempat di mana browser
dapat melakukan pelungkaian baris jika diperlukan
(jika teks tidak muat dalam lebar elemen).
Pelungkaian seperti ini disebut pelungkaian lembut.
Tidak memerlukan tag penutup.
Ketika memindahkan kata melalui tag wbr, simbol
pemindahan "-" tidak ditambahkan. Jika
Anda membutuhkannya - gunakan simbol pelungkai
lembut ­ (titik koma
di akhir wajib, ini bukan salah ketik).
Pelungkai lembut ­ menunjukkan
kepada browser tempat di mana ia dapat melakukan pelungkaian
kata (jika diperlukan), dengan menempatkan
simbol pemindahan "-".
Pelungkai lembut ­ tidak akan
bekerja jika properti hyphens
diatur ke nilai none (sedangkan pelungkaian
wbr akan bekerja).
Contoh . Teks tanpa pelungkaian
Mari kita lihat contoh teks, di mana ada kata-kata panjang yang keluar dari batas blok. Mari atur lebar blok kecil sehingga kata panjang tidak muat di dalamnya:
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Contoh . Tag wbr
Di sini, mari tambahkan tag wbr di
tempat-tempat di mana kami merekomendasikan browser untuk melakukan
pelungkaian kata jika diperlukan (perhatikan
bahwa browser akan melakukan pelungkaian
tidak di semua tempat yang kami tentukan):
<div id="elem">
this is super<wbr>super<wbr>super<wbr>long text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Contoh . Simbol ­
Mari coba ganti tag wbr
dengan simbol ­. Di tempat
pelungkaian akan ditampilkan tanda hubung:
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Lihat juga
-
tag
br,
,
yang melakukan pelungkaian ke baris baru -
properti
hyphens,
yang mengatur pelungkaian kata sesungguhnya -
properti
word-breakdanoverflow-wrap,
yang memungkinkan untuk memindahkan huruf kata panjang -
properti
overflow,
yang memotong bagian yang keluar dari batas blok