There are a few ways to break a line without using a tag. For that, we can use block-level elements.
Block-level elements start on a new line by default (if a CSS rule does not override the default behavior). Here, you can find how to make inline elements start on a new line.
In this snippet, we’ll use the following properties:
Let’s see how to break a line using the white-space property. This property specifies how the white space within an element must be handled. A white space can be a space sequence or a line break.
Create HTML
h1>W3Docs h1> div> Example Example div>
Add CSS
Use the text-align property set to “center” for the element.
Add color to .
Use the white-space property set to “pre” for the element.
body < text-align: center; > h1 < color: #000000; > div < white-space: pre; >
Let’s see the result of our code.
Example of breaking a line using the white-space property:
html> html> head> title>Title of the document title> style> body < text-align: center; > h1 < color: #000000; > div < white-space: pre; > style> head> body> h1>W3Docs h1> div> Example Example div> body> html>
Result
W3Docs
Next, we’ll show how to break a line with the display property. We need to set display: block to represent an element as a block element. In the following example, we set display: block to the element which is inside a element.
Example of breaking a line using the display property:
Also, you can use the carriage return character (\A) as content in pseudo-element.
It is possible to add a new line using ::before and ::after pseudo-elements.
Example of breaking a line using the ::after pseudo-element:
html> html> head> title>Title of the document title> style> .line:after < content: '\A'; white-space: pre; > style> head> body> h3> spanclass="line">This is the first line span> spanclass="secondary-label">second line span> h3> body> html>
The CSS line-break property specifies how to enforce constraints for text wrapping on new lines when working with symbols and punctuation in Chinese, Japanese, or Korean (CJK) writing systems. The css line break property enables us to create breakpoints on our webpages without using the HTML element.
Why Should I Break Line in CSS?
We need to break lines in CSS because this reduces the reliance on many tags in our HTML document and improves the code readability. Additionally, it enables us to improve the readability of the text on our web pages, enhancing the user experience.
Information to Know Before Using It
The majority of CSS for line breaks requires minor changes to our HTML content. These changes could take the form of additional markup or a carriage return. We can modify the additional markup in CSS to create the necessary breakpoint. We can use a few CSS white-space values for the carriage return to preserve it on the website.
How To Add a New Line in CSS
We need to employ some methods to add a new line in CSS. Let’s discuss a few of them :
Using ::after to Insert a Line-break
To add a line-break using only CSS, we need to employ the pseudo-class ::after or ::before . In the stylesheet, we can use these pseudo-classes, with the HTML class or id , before or after the place where we want to insert a line break.
We will set the content property to the new-line character /a .
We will set the white-space property to pre , which prompts the browser to read every white space in content1 as white space.
The white-space property inserts a line break before an element and controls the text-wrapping and white spacing.
Using ::before to Insert a Line-break
This method works the same as the previous one.
It adds a line break before the specified id and class.
Here we will add a line break before the second line. Therefore, we will use the #content2 id.
CSS Content Property With Zero Font Size
Using the CSS Content Property with Zero Font Size requires us to enclose some HTML content with extra markup. We can use the HTML tag for the extra markup.The CSS manipulates the tag via a pseudo-element. This manipulation causes a CSS content line break, as shown below:
Carriage Return and Display Block
When using a carriage return and display block, it is necessary to include additional markup around the region where the breakpoint is needed. Using a CSS pseudo-element, we can manipulate the additional markup in CSS.
We will use the ::before pseudo-element.
We will add a carriage return character \a to the content.
Then, we will set the display property to block .
Note: The display property is set to the block-level value because block elements start on a new line, filling the whole available width.
Carriage Return and White Space Pre
This method works the same as the above technique, but the white space pre only preserves the carriage return on the web page, forcing a line break CSS effect.
Break it in HTML, Preserve it in CSS
In this technique, we add a breakpoint in the HTML markup and preserve the breakpoint with a white space pre-line in CSS. This method enables us to add a line break in CSS before an element without using the pseudo-elements.
Note: We only set the white-space property to the pre-line value for the
element.
Break With Flexbox Direction
We can wrap the necessary breakpoint in our HTML with extra markup. Then, in our CSS, we will do the following:
This method causes all the flex items to stack on top of each other, creating a CSS paragraph break.
Display Block on CSS Before Pseudo Element
We will use the CSS content property and specify its content as an empty string.
Then, we will change the ::before pseudo-element to a block-level element.
Display Table
We will set the CSS display property to a table for the breakpoints. Since the table is a block-level element, it will cause a line break.
Browser Support
All modern web browsers support the methods and the css line break property discussed in this article.
Browser
Version
Google Chrome
58
Safari
11
Mozilla Firefox
69
Microsoft Edge
14
Opera
45
Chrome Android
58
Firefox for Android
79
Opera Android
43
Safari on iOS
11
Samsung Internet
7.0
WebView Android
58
Conclusion
CSS line-break property enables us to create breakpoints on our webpages without using the HTML element.
The css line break property improves the text readability on our web pages.
The majority of CSS for line breaks requires minor changes to our HTML content. We can modify the additional markup in CSS to create the necessary breakpoint.
We can style the markup with a pseudo-element to create a line break.
We can also use methods like the flexbox direction and display table to cause a line break.
The CSS white-space property controls how text is handled on the element it is applied to. Let’s say you have HTML exactly like this:
You’ve styled the div to have a set width of 100px. At a reasonable font size, that’s too much text to fit in 100px . Without doing anything, the default white-space value is normal , and the text will wrap. See the example below or follow along at home with the demo.
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code). When the text renders in the browser, those line breaks appear as if they are stripped out. Also stripped out are the extra spaces on the line before the first letter. If we want to force the browser to display those line breaks and extra white space characters we can use white-space: pre; It’s called pre because the behavior is that as if you had wrapped the text in tags (which by default handle white space and line breaks that way). White space is honored exactly as it is in the HTML and the text does not wrap until a line break is present in the code. This is particularly useful when literally displaying code, which benefits aesthetically from some formatting (and sometimes is absolutely crucial, as in white-space-dependent languages!) Perhaps you like how pre honors white space and breaks, but you need the text to wrap instead of potentially break out of its parent container. That’s what white-space: pre-wrap; is for: Finally, white-space: pre-line; will break lines where they break in code, but extra white space is still stripped. Interestingly, the final line break is not honored. As per the CSS 2.1 spec: “Lines are broken at preserved newline characters, and as necessary to fill line boxes.” so perhaps that makes sense. Here is a table to understand the behaviors of all the different values:
New lines
Spaces and tabs
Text wrapping
normal
Collapse
Collapse
Wrap
pre
Preserve
Preserve
No wrap
nowrap
Collapse
Collapse
No wrap
pre-wrap
Preserve
Preserve
Wrap
pre-line
Preserve
Collapse
Wrap
In CSS3, the white-space property is literally going to follow that chart and map the properties to text-space-collapse and text-wrap accordingly.
If you want to prevent the text from wrapping, you can apply white-space: nowrap; 
Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code). When the text renders in the browser, those line breaks appear as if they are stripped out. Also stripped out are the extra spaces on the line before the first letter. If we want to force the browser to display those line breaks and extra white space characters we can use white-space: pre; 
It’s called pre because the behavior is that as if you had wrapped the text in tags (which by default handle white space and line breaks that way). White space is honored exactly as it is in the HTML and the text does not wrap until a line break is present in the code. This is particularly useful when literally displaying code, which benefits aesthetically from some formatting (and sometimes is absolutely crucial, as in white-space-dependent languages!) Perhaps you like how pre honors white space and breaks, but you need the text to wrap instead of potentially break out of its parent container. That’s what white-space: pre-wrap; is for: 
Finally, white-space: pre-line; will break lines where they break in code, but extra white space is still stripped. 
Interestingly, the final line break is not honored. As per the CSS 2.1 spec: “Lines are broken at preserved newline characters, and as necessary to fill line boxes.” so perhaps that makes sense. Here is a table to understand the behaviors of all the different values: