Thẻ wbr
Thẻ wbr chỉ định vị trí mà trình duyệt
có thể ngắt dòng nếu cần thiết
(nếu văn bản không vừa với chiều rộng của phần tử).
Những lần ngắt dòng như vậy được gọi là ngắt mềm.
Không yêu cầu thẻ đóng.
Khi ngắt từ thông qua thẻ wbr, ký tự
gạch nối "-" không được thêm vào. Nếu
bạn cần nó - hãy sử dụng ký tự ngắt mềm
­ (dấu chấm phẩy
ở cuối là bắt buộc, đây không phải lỗi đánh máy).
Ngắt mềm ­ chỉ định
trình duyệt vị trí mà nó có thể ngắt
từ (nếu cần thiết), đồng thời đặt
ký tự gạch nối "-" tại đó.
Ngắt mềm ­ sẽ không
hoạt động nếu thuộc tính hyphens
được đặt thành giá trị none (còn ngắt dòng
wbr thì vẫn hoạt động).
Ví dụ . Văn bản không có ngắt dòng
Hãy xem xét một đoạn văn bản mẫu, trong đó có những từ dài, tràn ra ngoài ranh giới của khối. Chúng ta sẽ đặt chiều rộng nhỏ cho khối để từ dài không vừa bên trong nó:
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Ví dụ . Thẻ wbr
Còn ở đây, hãy thêm thẻ wbr vào
những vị trí mà chúng ta đề xuất trình duyệt thực hiện
ngắt từ nếu cần thiết (hãy chú ý
rằng trình duyệt sẽ thực hiện ngắt dòng
không phải ở tất cả mọi nơi chúng ta chỉ định):
<div id="elem">
this is super<wbr>super<wbr>super<wbr>long text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Ví dụ . Ký tự ­
Hãy thử đặt ký tự ­
thay vì thẻ wbr. Ở những vị trí
ngắt dòng sẽ hiển thị dấu gạch nối:
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Xem thêm
-
thẻ
br,
,
tạo ngắt dòng sang dòng mới -
thuộc tính
hyphens,
thiết lập ngắt từ thực sự -
thuộc tính
word-breakvàoverflow-wrap,
cho phép ngắt các chữ cái của một từ dài -
thuộc tính
overflow,
cắt bỏ các phần tràn ra ngoài ranh giới của khối