Breaking a Line in HTML

Text Elements in HTML – Part 4

Foreword: In this part of the series, I explain how to break a line in HTML.

By: Chrysanthus Date Published: 31 May 2015

Introduction

This is part 4 of my series, Text Elements in HTML. In this part of the series, I explain how to break a line in HTML. You should have read the different parts of the series before reaching here, as this is a continuation.

br
This is a single tag line-break element (the start tag). It sends all the text that would appear on its right, to the next line below. When typed just after a previous line-break element, it creates a blank line. It should be used inside a paragraph as in the following example:

J. Smith 
55 Wallaby Way 
Sydney


In the past, you could use the line-break elements to demarcate paragraphs instead of the p element. However, today HTML5 discourages that. Today, you should typically use line-break elements within a paragraph.

Do not confuse between the line-break element, and the newline character, \n. They have the same functions but they are used for different types of documents. is used in documents displayed by the browser. \n is used to send printouts to the console or for documents to be opened by the text editor.

wbr
This is a single tag element (the start tag). It represents a line-break opportunity. Imagine that you have a very long word, that is longer than the width of the computer screen. Such a word can only be displayed on a web page that has a horizontal scroll bar at the bottom of the screen; so that the user can scroll right and left to see the ends of the word.

To avoid the use of the horizontal scroll bar, you have to insert the wbr element at certain points in the word (on the right). The browser will use one of these points to break the word and send the rest of the word on the right to the next line below.

In the following example, someone is quoted as saying something which, for effect, is written as one long word. However, to ensure that the text can be wrapped in a readable fashion, the individual words in the quote are separated using a wbr element.

So then he pointed at the tiger and screamed
"thereisnowayyouareevergoingtocatchme"!

You can try this example. It has been taken from the HTML5 specification. I tried the code and everything was on one line. However, if you give the paragraph element a small width, you may see some wrapping.

For another example, consider the following HTML tags and characters:

<kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd>

As a web designer, once a while you will have to code something like this but longer. The display may not fit in your containing HTML element, leading to the appearance of the browser horizontal bar or the display goes right to the bottom of the web page or the display is chopped off somewhere on the right.

Now, the space (produced by pressing the spacebar) is a line-break opportunity. However, there is no need for you to type a space in the above line text. The thing to do is to put the wbr element where you want the browser to wrap the text to the next line, when necessary. For this particular case I would have,

<kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd>

Note my position of .

Well, that is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

Breaking a Line in HTML

Text Elements in HTML – Part 4

Introduction

Related Links

Comments