Tag wbr
Tag wbr menunjukkan tempat di mana pelayar
boleh memindahkan baris jika perlu
(jika teks tidak muat dalam lebar elemen).
Pemindahan seperti ini dipanggil pemindahan lembut.
Tidak memerlukan tag penutup.
Apabila memindahkan perkataan melalui tag wbr, simbol
pemindahan "-" tidak ditambah. Jika
ia diperlukan - gunakan simbol pemindahan lembut
­ (titik koma
di akhir adalah wajib, ini bukan kesilapan).
Pemindahan lembut ­ menunjukkan
kepada pelayar tempat di mana ia boleh membuat pemindahan
perkataan (jika perlu), dengan meletakkan
symbol pemindahan "-".
Pemindahan lembut ­ tidak akan
berfungsi jika sifat hyphens
ditentukan dengan nilai none (tetapi pemindahan
wbr akan berfungsi).
Contoh . Teks tanpa pemindahan
Mari kita lihat contoh teks, di mana terdapat perkataan panjang yang melebihi sempadan blok. Mari kita tetapkan lebar blok kecil supaya perkataan 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 kita tambah tag wbr di
tempat-tempat di mana kami mengesyorkan pelayar untuk membuat
pemindahan perkataan jika perlu (perhatikan
bahawa pelayar akan membuat pemindahan
bukan di semua tempat yang kami nyatakan):
<div id="elem">
this is super<wbr>super<wbr>super<wbr>long text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Contoh . Simbol ­
Mari cuba gunakan simbol ­
sebagai ganti tag wbr. Di tempat
pemindahan, sengkang akan dipaparkan:
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Lihat juga
-
tag
br,
,
yang membuat pemindahan ke baris baru -
sifat
hyphens,
yang menetapkan pemindahan perkataan sebenar -
sifat
word-breakdanoverflow-wrap,
yang membenarkan pemindahan huruf perkataan panjang -
sifat
overflow,
yang memotong bahagian yang melebihi sempadan blok
