Word break in HTML | wbr tag in HTML

How to break a word when a line ends?

html5 tutorial how to code

In writing English we commonly use hyphens to break a word apart if we have reached the end of the line. Word break in HTML is done in two different ways. The first is with the help of a named entity “&shy;” or soft hyphen. The second one is done without the hyphens with the help of <wbr /> word break tag. See the code to understand more.

HTML Code Example:

<!DOCTYPE html>

<html lang='en'>

<head>

<meta charset="UTF-8" />

<title>

HTML Text <bdo> tag

</title>

</head>

<body>

<h2>

Word break in htm using <bdo> tag

</h2>

<p>

To learn AJAX, one must be familiar with the XML&shy;Http&shy;Request Object.

</p>

<p>

To learn AJAX, one must be familiar with the XML<wbr />Http<wbr />Request Object.

</p>

</body>

</html>

In the above code we are using &shy character reference or named entity to break the word on the end of the line. When the browser will reach the text we have put the “&shy” entity in will break it and will put a hyphen at the end of the word.

In the second paragraph we are using the HTML <wbr /> tag to break “XMLHttpRquest” into three parts without any hyphen between them when the browser line ends at that word. If you want to see the end result click on the window minimize button and the drag the browser window to shorten the line. You will see the difference at the end.

The word-break property specifies line breaking rules for non-CJK scripts. CJK means Chinese, Japanese and Korean scripts.You can do this by using CSS  as well. In CSS the word-wrap property allows long words to be able to be broken and wrap onto the next line. There are many values of this property we will not discuss it here you can see the CSS tutorial part for this.

Comments