Wbr, bdi, bdo

Learn line break opportunities and bidirectional text control.

wbr: line break opportunity

The  tag marks a line break opportunity. If a long word or link overflows, the browser breaks here; if not, nothing happens. It is a void tag, written without closing.

Example: longcompoundwordbreakhere. If 'longcompoundwordbreakhere' overflows, the browser breaks at the  position. The reader now follows long links or technical terms with ease.

bdi and bdo: direction control

The <bdi> tag isolates text with an unknown direction. A name from a user may be right-to-left or left-to-right; wrapped in <bdi>, it no longer disturbs the surrounding text.

The <bdo> tag forces the text direction. Its dir attribute is rtl (right to left) or ltr (left to right). Example: <bdo dir="rtl">1234-5678</bdo>. bdi isolates, bdo overrides.

Exercise Write bdi, bdo and wbr

Add three paragraphs to body. The first holds the text Writer:, then a <bdi> tag with content user-123, then - 10 points. The second holds a <bdo> tag with dir="rtl" and content 1234-5678. The third holds a long text: the letters longcompoundword, then a  tag, then the letters breakhere.

Show example solution

<body>
  <p>Writer: <bdi>user-123</bdi> - 10 points</p>
  <p><bdo dir="rtl">1234-5678</bdo></p>
  <p>longcompoundword<wbr>breakhere</p>
</body>

Test yourself

Which tag forces a text direction?
- <bdi>
- <dir>
- <bdo>
- <rtl>
Show answer

<bdo> — Correct. bdo forces the direction with the dir attribute.

Complete the bdo tag

<____ dir="rtl">This line runs right to left</bdo>

Show answer

<bdo dir="rtl">This line runs right to left</bdo>

Match each tag to its role



Break opportunity
<bdi>

Direction isolation
<bdo>

Direction override
 

Line break

Next lesson: Summary - Technical doc

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies