Jump to content

<wbr> tag


Recommended Posts

<wbr> tag

<wbr> tag

Specification

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Description

The <wbr> tag indicates to the browser where it is allowed to do line breaks in the text if the width of the parent element requires it.

Syntax

Text<wbr>Text

Closing tag

Not required.

Attributes

Not.

Example

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>WBR Tag</title>
  <style>
   .word { font-size: 2em; }
   wbr { display: inline-block; }
  </style>
 </head>
 <body>
  <<p>longest word in chemistry</p>
  <p class="word">Methoxychlor<wbr>dietilamina<wbr>methyl<wbr>it<wbr>amino<wbr>acridine</p>
 </body>
</html>

The result of the example shown in the figure below. When changing the width of the window, the text will be transferred in those places where the <wbr> tag is specified.

<wbr> tag

Browsers

No browser adds a hyphen when wrapping text. If necessary, you can simulate a hyphen by replacing the <wbr> tag with the soft hyphen symbol & shy;

Internet Explorer 8 and Opera until version 11.7 do not make line breaks until the display property with the value inline-block is specified in the styles for wbr, as shown in the example.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.