Web Cơ Bản

Thẻ <wbr> trong HTML

MỘT VÀI ĐIỀU CẦN NẮM RÕ VỀ TỪ (WORD)

  • Một từ (word) là chuỗi gồm một hoặc nhiều ký tự liên tiếp (không chứa dấu khoảng trắng)
  • Nếu một từ quá dài có thể dẫn đến trường hợp khi hiển thị lên màn hình, chiều rộng của phần tử không đủ để chứa hết nó, khiến từ đó bị tràn ra ngoài và làm hỏng giao diện (điển hình như việc trình duyệt tự động tạo một thanh scroll trong khi chúng ta không mong đợi việc đó)

- Từ đây, thẻ <wbr> giúp chúng ta khắc phục tình trạng một từ quá dài dẫn đến trường hợp từ bị tràn ra khỏi phần tử.

- Thẻ <wbr> được chèn vào bên trong một từ:

  • Nếu dòng hiện tại không đủ để chứa hết từ đó thì những ký tự nằm phía sau thẻ <wbr> sẽ được ngắt xuống dòng.
  • Nếu dòng hiện tại đủ để chứa hết từ đó thì thẻ <wbr> được xem như vô nghĩa.
Ví dụ:

- Trường hợp dòng hiện tại không đủ để chứa hết từ

(Những ký tự nằm phía sau thẻ <wbr> sẽ được ngắt xuống dòng)


<!DOCTYPE html>
<html>
<body>
<p>Tài liệu hướng dẫn học lập trình web1234567891234<wbr>5678912345678912345678912345678912345678912345678912345678912345678912</p>
</body>
</html>
Xem ví dụ
Ví dụ:

- Trường hợp dòng hiện tại đủ để chứa hết từ

(Thẻ <wbr> được xem như vô nghĩa)


<!DOCTYPE html>
<html>
<body>
    <p>Tài liệu hướng dẫn học lập trình web1234567891234<wbr>5678</p>
</body>
</html>
Xem ví dụ

- Lưu ý: Đối với một từ quá dài, dùng một thẻ <wbr> để ngắt xuống dòng nhưng phần ký tự xuống dòng đó vẫn còn quá dài, thì ở trường hợp này chúng ta có thể sử dụng nhiều thẻ <wbr>

Ví dụ:

<!DOCTYPE html>
<html>
<body>
<p>Tài liệu hướng dẫn học lập trình web123456789123456<wbr>78912345678912345678912345678912345678912345678912345678912<wbr>345678912345678912345678912345678912345<wbr>6789123456789123456789123456789123456789123456789</p>
</body>
</html>
Xem ví dụ