Line breaking space html

How to add a Line Break in HTML?

Are you a beginner in the web development journey and have been trying to add a line break in HTML by simply pressing the enter/return key from your keyboard but not getting the desired result? Then you have landed on the right article. This article list down various ways you can add a line break in HTML (through CSS too).

Adding Line Break in HTML

If you press the return (enter) key in HTML then the browser removes all the empty multiple lines and just adds a single space instead of multiple empty lines. But many-a-times we need to break the text into multiple lines. Now let us discuss some ways to add a line break in HTML.

Using break (
) tag

tag stands for the break and this tag is used to insert a line break in HTML. This is the simplest method to add a line break in HTML. This
tag is equivalent to a carriage return. This tag has great significance when you want to create divisions in the text like writing poems, quotes, addresses, etc.

The
tag is an open tag i.e. it does not require a closing tag.

Code Demonstration:

html> html> head> title>Codedamn title> head> body> p>Whose woods these are I think I know. br> His house is in the village though; br> He will not see me stopping here br> To watch his woods fill up with snow. p> p>My little horse must think it queer br> To stop without a farmhouse near br> Between the woods and frozen lake br> The darkest evening of the year. p> body> html>
Code language: HTML, XML (xml)

Code Output:

We can see a visual hierarchy in the above output because of the
tag. Whereas if we had not used this
tag here then the output would look like a simple paragraph with no line breaks hence making the poem unreadable.

At various places, you might observe the
tag used as
. This forward slash was of great importance in HTML4 but is no longer required in HTML5. You might also observe that if you are using any code formatter like Prettier then it automatically adds the forward slash in
tag when you save the file.

Although the
tag works perfectly fine you should use it only when it is absolutely necessary as using a
tag makes our code less accessible and also makes it difficult for the screen reader to understand.

Using Block Level Elements

Using block level elements in HTML automatically adds a line break at the beginning and the end of the content placed inside it. A block level element always starts from a new line. It takes the entire width of its parent no matter how small the content is, and shifts the next element to a new line.

Let us see a code example to understand better.

Code Demonstration:

html> html> head> title>Codedamn title> head> body> div class="text1">Hey there! div> span class="text2">Greetings from Codedamn. span> span class="text3">Don't forget to explore our courses to enhance your knowledge. span> body> html>
Code language: HTML, XML (xml)

Code Output:

From the above output, we can understand that div is a block element so it took the entire width of the screen and pushed the next element to the new line thus creating a line break whereas span is an inline element so the content of both the span elements in the above code is placed adjacent to each other without a line break.

Adding Line Break in CSS

Although we can add a line break using HTML it is preferred to handle layouts and spacing through CSS only. So now, let us see some ways to add line breaks using CSS.

Using pseudo-class in CSS

We can easily add a line break through CSS by using pseudo-class on HTML classes or ids. To insert a line break before or after the element we can use the ::before or ::after pseudo-classes respectively with the respective elements class or id and give the content property a value of \a which is a new line character and also assigns a value pre to the white-space property so that the browser renders all the white space and line breaks in that particular element.

Let us see some examples to understand better.

Code Demonstration 1:

Demonstration of ::after pseudo-class:

html> html> head> style> .text1::after< content: "\a"; white-space: pre; > style> head> body> span class="text1">Hey there! span> span id="text2">Greetings from Codedamn :) span> body> html>
Code language: HTML, XML (xml)

Here as we wanted a line break after the span with class text1 so in the above code example we have used the after pseudo-class and given \a value to the content and given pre as the value to the white space property so that all the white spaces and line breaks stay preserved and thus we got a line break after the content of the first span (with class text1).

Code Demonstration 2:

Demonstration of ::before pseudo-class:

html> html> head> style> #text2::before< content: "\a"; white-space: pre; > style> head> body> span class="text1">Hey there! span> span id="text2">Greetings from Codedamn :) span> body> html>
Code language: HTML, XML (xml)

Here as we wanted a line break before the span with id text2 so in the above code example we have used before pseudo-class and given \a value to the content and given pre as the value to the white space property so that all the white spaces and line breaks stay preserved and thus we got a line break before the content of the second span (with id text2).

Code Demonstration 3:

Demonstration of ::after and ::before pseudo-classes together:

html> html> head> style> .text1::after< content: "\a"; white-space: pre; > #text2::before< content: "\a"; white-space: pre; > style> head> body> span class="text1">Hey there! span> span id="text2">Greetings from Codedamn :) span> body> html>
Code language: HTML, XML (xml)

In the above code example above, we have used both after pseudo-class and before pseudo-class to add a line break after the first span and before the second span respectively.

Block Elements in CSS

Setting the display property of an element to block is one of the easiest ways to achieve a line break through CSS. A block element always starts on a new line and takes the entire width of the parent element irrespective of how small the width of the content is.

Lets us see a code example to understand better.

Code Demonstration:

html> html> head> style> .text1< display: block; > style> head> body> span class="text1">Hey there! span> span>Greetings from Codedamn. span> span>Don't forget to explore our courses to enhance your knowledge. span> body> html>
Code language: HTML, XML (xml)

Code Output:

From the above code image, we can observe that span being an inline element occupied the complete width and moved the remaining content to the next line thus adding a line break. This happened because we changed the span to block element using the CSS display property.

Exploiting Table Layout

Setting the display property of any HTML element to a table can also help us achieve a line break. Although this should be your least preferred method to add a line break in HTML because it is not semantically correct because it indicates that the data to which this property is applied is tabular data.

Let us see a code example to understand better:

Code Demonstration:

html> html> head> style> .text1< display: table; > style> head> body> span class="text1">Hey there! span> span>Greetings from Codedamn. span> span>Don't forget to explore our courses to enhance your knowledge. span> body> html>
Code language: HTML, XML (xml)

Output Image:

As we can see from the above code output that setting the display of the span element with class text1 (initially an inline element) to table shifts the next element to the next line.

Conclusion

Now we know that HTML ignores all the line breaks added through the keyboard return key. In this article, we have explored various ways to add line breaks in HTML (through CSS as well) so go ahead and add line breaks in your HTML with any of the above-mentioned methods that you liked the most.

Hope you found this article helpful!?

Sharing is caring

Did you like what Simran Gangwani wrote? Thank them for their work by sharing it on social media.

Источник

line-break

The line-break CSS property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.

Try it

Syntax

/* Keyword values */ line-break: auto; line-break: loose; line-break: normal; line-break: strict; line-break: anywhere; /* Global values */ line-break: inherit; line-break: initial; line-break: revert; line-break: revert-layer; line-break: unset; 

Values

Break text using the default line break rule.

Break text using the least restrictive line break rule. Typically used for short lines, such as in newspapers.

Break text using the most common line break rule.

Break text using the most stringent line break rule.

There is a soft wrap opportunity around every typographic character unit, including around any punctuation character or preserved white spaces, or in the middle of words, disregarding any prohibition against line breaks, even those introduced by characters with the GL, WJ, or ZWJ character class or mandated by the word-break property. The different wrapping opportunities must not be prioritized. Hyphenation is not applied.

Formal definition

Formal syntax

line-break =
auto |
loose |
normal |
strict |
anywhere

Examples

Setting text wrapping

See whether the text is wrapped before «々», «ぁ» and «。».

HTML

div lang="ja"> p class="wrapbox auto"> auto:br />そこは湖のほとりで木々が輝いていた。br />その景色に、美しいなぁと思わずつぶやいた。 p> p class="wrapbox loose"> loose:br />そこは湖のほとりで木々が輝いていた。br />その景色に、美しいなぁと思わずつぶやいた。 p> p class="wrapbox normal"> normal:br />そこは湖のほとりで木々が輝いていた。br />その景色に、美しいなぁと思わずつぶやいた。 p> p class="wrapbox strict"> strict:br />そこは湖のほとりで木々が輝いていた。br />その景色に、美しいなぁと思わずつぶやいた。 p> p class="wrapbox anywhere"> anywhere:br />そこは湖のほとりで木々が輝いていた。br />その景色に、美しいなぁと思わずつぶやいた。 p> div> 

CSS

.wrapbox  width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; > .auto  line-break: auto; > .loose  line-break: loose; > .normal  line-break: normal; > .strict  line-break: strict; > .anywhere  line-break: anywhere; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Line breaking space html

white-space

The white-space property

white-space: normal | pre | nowrap | pre-wrap | break-spaces | pre-line

• Collapses sequences of spaces (or not)
• Preserves tabs and line feeds (or not)
• Allows lines to wrap (or not)
• Decides what happens to end-of-line spaces
• Applies to any element, not just blocks

Lorem ipsum.  Dolor   sit amet. ipsum.  Dolor   sit amet. consectetur ipsum.  Dolor amet. consectetur ipsum.  Dolor sit amet. consectetur 

Lorem ipsum. Dolor sit amet. consectetur 

Lorem    consectetur Lorem ipsum. Dolor sit