HTML

Thẻ BDI trong HTML là gì? Đoạn văn bản bị di chuyển thì phải làm sao?

Các bạn đang gặp vấn đề về việc đoạn văn bản của mình di chuyển mà không rõ lý do thì bài viết sẽ giới thiệu đến các bạn thẻ BDI để giải quyết vấn đề này, thế thẻ BDI trong HTML là gì? Ứng dụng ra làm sao? Hãy cùng mình đi vào bài viết để tìm hiểu cách sử dụng thẻ BDI nhé!

Chức năng của thẻ BDI trong HTML

Thẻ này dùng để cố định 1 chuỗi text (một đoạn văn bản) ở 1 vị trí nhất định giúp nó không bị trình duyệt hiểu nhầm và tự move vị trí của nó.

Ví như việc bạn sử dụng nhiều loại ngôn ngữ trong code, thì trình duyệt máy không thể định dạng hết các ngôn ngữ bạn chưa khai báo, thì bạn sử dụng thẻ <bdi> để cố định vị trí của chúng, để cho trình duyệt hiểu đoạn văn bản này là Tôi đặt ở vị trí này không cần phải di chuyển đi vị trí khác.

Các bạn hãy cùng mình đi vào trường hợp ví dụ cụ thể sau đây để có thể hiểu rõ hơn vấn đề.

Trường hợp sử dụng thẻ BDI. Đoạn văn bản bị di chuyển không như ý thì phải làm sao?

Cú pháp: <bdi> đoạn văn bản </bdi>

Ví dụ:

<!doctype html>
<html>

<head>
    <title>kinisinhvien.com</title>
    <meta charset="utf-8">
</head>

<body>
    <ul>
        <li>Tên người khảo sát <bdi> Alisa </bdi>: 60 points</li>
        <li>Tên người khảo sát <bdi> عَرَبِيّ </bdi> : 80 points </li>
    </ul>
</body>

</html>

thì kết quả bạn hiện ra sẽ thế này:


Thẻ BDI trong HTML là gì? Đoạn văn bản bị di chuyển thì phải làm sao? 2
Kết quả khi sử dụng thẻ BDI

Thế khi không sử dụng thẻ BDI thì kết quả sẽ thế nào? Các bạn hãy xem thử nghiệm tiếp theo nhé.

Thẻ BDI
Đây là kết quả khi bạn xóa thẻ BDI

Khi bạn xóa thẻ BDI thì tên “عَرَبِيّ” thuộc loại ngôn ngữ khác chưa được định dạng, thì sẽ bị trình duyệt di chuyển đến các vị trí không như mong muốn của mình.

Qua bài viết chắc các bạn đã rõ được chức năng và cách sử dụng thẻ BDI trong HTML. Việc vận dụng thẻ BDI vào thực tế thì thường sẽ được sử dụng trong các dự án khảo sát, nơi mà sử dụng nhiều loại ngôn ngữ khác nhau, để tránh cho các ngôn ngữ này di chuyển “vô tội vạ”.

Để có thể thử các thử nghiệm khác các bạn click chuột vào đường link Thử nghiệm thẻ BDI


Mới nhất cùng chuyên mục

Back to top button
Close