Learn about CSS Line Break
FREE
Overview
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 <br> element.
Why Should I Break Line in CSS?
We need to break lines in CSS because this reduces the reliance on many <br> 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.
In #content1::after :
- 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.
HTML
CSS
Output
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
Output
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 <span>tag for the extra markup.The CSS manipulates the <span> tag via a pseudo-element. This manipulation causes a CSS content line break, as shown below:
HTML
CSS
Output
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.
HTML
CSS
Output
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.
HTML
CSS
Output
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 <p> element.
HTML
CSS
Output
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:
- Set up a flex container around the text.
- Set the flex-direction value to a column.
This method causes all the flex items to stack on top of each other, creating a CSS paragraph break.
HTML
CSS
Output
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.
HTML
CSS
Output
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.
HTML
CSS
Output
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 <br> 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.