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-break và 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

Thẻ wbr

Ví dụ . Văn bản không có ngắt dòng

Ví dụ . Thẻ wbr

Ví dụ . Ký tự &shy;

Xem thêm

Ví dụ . Ký tự