How to Add a Line-Break to an HTML Element Using CSS Only?

In this post, we’ll explore various ways to create a line-break in our content using only CSS.

Line-Break Between Lines of Text

We can display the line-breaks in text without adding any extra mark-up by using the white-space CSS property, with any one of the following values:

white-space:	New lines	Spaces & tabs	Text wrapping
pre	Preserve	Preserve	No wrap
pre-wrap	Preserve	Preserve	Wrap
pre-line	Preserve	Collapse	Wrap

Using either of these properties would make the element act like a element (which preserves newlines), for example:

  
Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Mauris eget pellentesque lacus.
 

This does not work in IE-7 and below.

Line-break Between HTML Elements

Block-level elements by default start on a new line (unless the default behavior is overridden by a CSS rule). To force inline elements to a new line, however, you could do any of the following:

Set display: block; on the element:

Use the carriage return character ( \A ) as content in pseudo-element:

  
Lorem ipsum dolor sit amet.Consectetur adipiscing elit. 
 

Hope you found this post useful. It was published 15 May, 2018 (and was last revised 03 Jun, 2020 ). Please show your love and support by sharing this post.

Источник

Different ways to create a line break in HTML

The Hypertext Markup Language is a language that is known worldwide for its flexibility and easy-to-use properties, features, and tags. In HTML, a paragraph, stanza of any poem, or postal address always starts on a new line.

For this, users can easily create a new line with the different tags in HTML. But what if they like to add text within a paragraph that will start on a new line? It is also possible through different ways to use tags in HTML. This article will discuss all the various methods of Line break in HTML.

Method 1: Using the
tag to break a line in HTML:

When users want to add a new or start with a new line, they can use this HTML
tag, such as in poems or addresses where the line break is needed. In HTML, the
tag is an empty tag.

It implies the tag does not require any end tag. Generally, a web browser does not recognize a newly inserted line and paragraph piece in a content text. So, if users want to start with a new line, they have to insert the line break using the HTML
tag.

When users add a line break, this signifies moving to the new line for adding a few spaces between two different lines, any additional HTML document paragraphs, or webpage elements. One attribute of the
tag is the «clear» attribute. The
tag tells the browser where to start a new line after the preceding line break.

Code Snippet:

    
An example of the HTML br tag
 
the line break with br tag 
the line break with br tag 
the line break with br tag 
Note: This tag does not require any end tag
  

Some browsers that support the HTML
tag are as follows:

• Firefox
• Google Chrome
• Internet Explorer
• Microsoft Edge
• Opera
• Safari

Method 2: Using the tag to break a line in HTML:

Though the div is to create a division for new content in HTML, such as images, text, header, footer, navigation bar, and many more, users can often use this to create a new line. The tag contains both the opening and closing tags. The tag is a block-level element. So users can set the line break before and after it.

Code Snippet:

    
An example of the HTML br tag
 
the line break with br tag
 
the line break with br tag
 
the line break with br tag
 
Note: Users should add the end tags while using this tag
  

Some Browsers that support the HTML tag are as follows:

Method 3: Using the

tag to break a line in HTML:

Generally, the HTML

tag is to define a paragraph inline elements and content. A

tag is a tag that has an opening and closing tags known as pair tags.

It is mandatory to close the tag. The

tag works almost the same as the
tag, but the difference is HTML

tag is a block-level element and is mainly used to add content, whereas users can use the
tag to force a line break inside the element.

Usually, users represent paragraphs in visual media as sections of text divided from sections of adjoining text by white space, a blank line, or a first-line indentation. But HTML paragraphs (or

tag) can be a structural set of related content, such as images, videos, or other forms of elements or fields.

Code Snippet:

    
An example of the HTML paragraph tag
 
the line break with br tag
 
the line break with br tag
 
the line break with br tag
 
Note: Users should add the end tags while using this tag
  

Some browsers that support the HTML

tag are as follows:

• Internet Explorer
• Google Chrome
• Firefox
• Safari
• Edge
• Opera

Method 4: Using the HTML tag:

In this method, we show the use of the HTML tag that defines a preformatted text. The browser will display the text within the element in a fixed-width font, and the text maintains line breaks and white spaces.

Code Snippet:

    
An example of the HTML pre tag
 
This is the first line This is the second line This is the third line
 
  
 
Some browsers that support the HTML tag are as follows: 
 
 
Internet Explorer
 
Google Chrome
 
Firefox
 
Safari
 
Edge
 
Opera
 
 
Method 5: Using the HTML tag:
 
Here, we used the tag that forces a line to break with CSS display:block . It creates a line break.
 
Code Snippet: 
 
    h1 span 
This will break the line hereand this is the second line
  
 
Some browsers that support the HTML tag are as follows: 
 
 
Internet Explorer
 
Google Chrome
 
Firefox
 
Safari
 
Edge
 
Opera
 
 
When users want a section of content that is mandatory to appear on a separate line, such as a stanza of a poem or a postal address, they can use any of the above tags and apply line break elements instead of paragraph elements.
 
We hope this article has given a crisp idea of the ideal use case of line breaks and walked through how to create a line break using the different tags in HTML.
 
Источник
 
How to Wrap Text Onto a New Line in CSS
 
Large portions of text breaking the style or layout of your website? Here’s how to wrap text with CSS.
 
 
Readers like you help support MUO. When you make a purchase using links on our site, we may earn an affiliate commission. Read More.
 
Long texts can appear uncontrollable during web design. But they can be unavoidable as well, and sometimes they end up crossing borders. This can create a loose Document Object Model (DOM) with an unnecessary overflow that is not user-friendly.
 
But here’s the good news: you can deal with such long texts by wrapping them onto a new line using CSS. Here we’ll show you just how to wrap long, unbroken texts with CSS.
 
How CSS Text Wrap Works
 
CSS handles stretched long words using the inbuilt word-wrap or overflow-wrap property.
 
However, when not controlled, browsers handle such long texts by default. They won’t wrap long words until they receive the instruction to do so.
 
The two major CSS properties mentioned earlier work the same way and you can use them interchangeably. However, they accept four values or syntaxes:
 
 
break-word: This is the actual CSS syntax that tells the browser to wrap a long text over to a new line.
 
normal: It breaks each word at the normal points of separation within a DOM. It doesn’t have effect on long strings.
 
initial: It’s the default browser’s way of handling strings. Like the normal syntax, it doesn’t break long words.
 
inherit: It tells the child element to inherit the property of its parent. But it still doesn’t work with long texts, except you apply break-word to the parent element.
 
 
How to Wrap Long Words Using CSS Word Wrap
 
Wrapping words over to a new line with CSS is easy and doesn’t require cumbersome CSS tweaks to work.
 
For instance, the long h2 text within the text container in the sample image below crosses the border line:
 
 
Let’s see how we can wrap it onto the next line using the word-wrap CSS property:
 
div class="wrap-it">
This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above 
div"> 
 
After wrapping the long h2 text in the sample image, here’s the output:
 
 
That’s it! You now know how to wrap words onto a new line within your DOM using CSS.
 
However, as stated earlier, word-wrap and overflow-wrap work the same way and accept similar properties.
 
To use overflow-wrap instead, just replace word-wrap with it.
 
Источник
 
HTML New Line – How to Add a Line Break with the BR Tag
 
 
 Dillion Megida
 
 
In this article, I’ll explain what line breaks are and show you how to create them in HTML.
 
What is a Line Break?
 
A line break, as the name implies, is a break in line 😅. A line break in HTML is a point where a line ends horizontally, and the next line starts on a new line.
 
In HTML, when you write a string like this:
 
 
Hello, I am trying to create a new line
 
 
The whitespaces (the tab space before «Hello», the space between «am» and «trying», «a» and «new») will be ignored. The result on the screen will appear like this:
 
Hello, I am trying to create a new line 
 
One way to fix this (though it’s not very effective) is to create three 
 
tags like this:
 
Hello, I am
 
trying to create a
 
new line
 
 
This will result in the following:
 
Hello, I am trying to create a new line 
 
Because p tags create block elements, they occupy the entire horizontal space and the next element goes to the next line – as you can see from the result above.
 
This solution is not effective because you have created three paragraphs. In cases where a screen reader is to interpret this, it will read it as three paragraphs instead of a single sentence. This can affect web accessibility.
 
So how do you add a line break for an inline element?
 
How to Add a Line Break in HTML
 
HTML has tags for numerous purposes, including to create line breaks. You can use the br tag in HTML to add line breaks. It can go between inline elements to break the elements into multiple parts.
 
Here is an example of a paragraph with the br tag:
 
 
Hello, I am 
trying to create a 
new line
 
 
The br tag is a void element that doesn’t have a closing tag. Instead, it is a self-closing tag.
 
The above code results in this:
 
Hello, I am trying to create a new line 
 
You can use this tag for other forms of inline elements like links. For example, look at this code:
 
Anchor tags, a , are inline elements, so instead of the second link showing on the next line, it shows in the same line like this:
 
 
 
You can use the br tag between the links to break the first link line:
 
 
Conclusion
 
The br tag in HTML starts the next element on a new line, similar to the carriage return \n in strings.
 
Instead of using block elements for putting elements in new lines, you can use the line break tag: br .
 
In cases like sentences, using the br tag serves as a visual line break and doesn’t affect accessibility. Screen readers will read the sentence as it is without pause.
 
 
 Dillion Megida
 
Developer Advocate and Content Creator passionate about sharing my knowledge on Tech. I simplify JavaScript / ReactJS / NodeJS / Frameworks / TypeScript / et al My YT channel: youtube.com/c/deeecode
 
If you read this far, tweet to the author to show them you care. Tweet a thanks
 
Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started 
 
freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)
 
Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.
 
Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.
 
Источник