<wbr>: Phần tử Cơ hội Ngắt Dòng
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Phần tử <wbr> HTML đại diện cho một cơ hội ngắt từ — một vị trí trong văn bản mà trình duyệt có thể tùy ý ngắt dòng, dù các quy tắc ngắt dòng của nó thường không tạo ra một điểm ngắt tại vị trí đó.
Try it
<div id="example-paragraphs">
<p>Fernstraßenbauprivatfinanzierungsgesetz</p>
<p>Fernstraßen<wbr />bau<wbr />privat<wbr />finanzierungs<wbr />gesetz</p>
<p>Fernstraßen­bau­privat­finanzierungs­gesetz</p>
</div>
#example-paragraphs {
background-color: white;
overflow: hidden;
resize: horizontal;
width: 9rem;
border: 2px dashed #999999;
}
Thuộc tính
Phần tử này chỉ bao gồm các thuộc tính toàn cục.
Ghi chú
Trên các trang được mã hóa UTF-8, <wbr> hoạt động giống như điểm mã U+200B ZERO-WIDTH SPACE. Cụ thể, nó hoạt động giống như một điểm mã bidi BN Unicode, nghĩa là nó không có tác dụng đối với thứ tự bidi: <div dir=rtl>123,<wbr>456</div> hiển thị, khi không bị ngắt thành hai dòng, là 123,456 chứ không phải 456,123.
Vì lý do tương tự, phần tử <wbr> không đưa vào một dấu gạch nối tại điểm ngắt dòng. Để hiển thị dấu gạch nối chỉ ở cuối dòng, sử dụng ký tự thực thể dấu gạch nối mềm (­) thay thế.
Ví dụ
The Yahoo Style Guide khuyến nghị ngắt URL trước dấu câu, để tránh để lại dấu câu ở cuối dòng mà người đọc có thể nhầm là cuối URL.
<p>
http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages
</p>
Kết quả
Tóm tắt kỹ thuật
| Danh mục nội dung | Nội dung luồng, nội dung cụm từ. |
|---|---|
| Nội dung được phép | Rỗng |
| Bỏ qua thẻ | Phải có thẻ mở và không được có thẻ đóng. |
| Phần tử cha được phép | Bất kỳ phần tử nào chấp nhận nội dung cụm từ. |
| Vai trò ARIA ngầm định | Không có vai trò tương ứng |
| Vai trò ARIA được phép | Bất kỳ |
| Giao diện DOM | HTMLElement |
Đặc tả
| Thông số kỹ thuật |
|---|
| HTML # the-wbr-element |
Tương thích trình duyệt
Xem thêm
overflow-wrapword-breakhyphens- Phần tử
<br>