How to apply inline CSS ?

How To Add Line Break in CSS?

Last Updated : 11 Jan, 2025

CSS provides flexible options to add or manage line breaks in your content. Here are some effective techniques:

1. Using the white-space Property

The white-space property allows controlling how text wraps and respects line breaks within an element.

HTML

<html>
<head>
    <style>
        .break {
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <div class="break">
        This is the first line. 
        This is the second line.
    </div>
</body>
</html>

white-space: pre-wrap; preserves line breaks in the HTML source code while wrapping long lines automatically.
The text inside the .break class will render with line breaks exactly as written.

2. Using display: block for Inline Elements

Changing the display property of inline elements to block can create line breaks between elements.

HTML

<html>
<head>
    <style>
        .break {
            display: block;
        }
    </style>
</head>
<body>
    <span class="break">Line 1</span>
    <span class="break">Line 2</span>
</body>
</html>

Setting display: block; makes inline elements occupy their own line, creating a visual line break.

3. Using ::after Pseudo-Element

The ::after pseudo-element can insert content, including line breaks.

HTML

<html>
<head>
    <style>
        .break::after {
            content: "\A";
            white-space: pre;
        }
    </style>
</head>
<body>
    <p class="break">This line will break here</p>
    <p>Second line </p>
</body>
</html>

content: "\A"; inserts a line break after the element's content.
white-space: pre; ensures the line break is respected in the rendered output.

How to apply inline CSS ?

A

abdal0672

Improve

Article Tags :

Similar Reads

How to Add Tooltip Line Breaks in ChartJS?

Chart.js tooltips are used to provide additional information about data points when a user hovers over them. By default, tooltips display information in a single line, but you can customize them to include line breaks for better readability or to present more complex data. This customization can be

How to apply inline CSS ?

In this article we will learn how to apply inline CSS, Inline CSS contains the CSS property in the body section attached to the element is known as inline CSS. This kind of style is specified within an HTML tag using the style attribute. It is used to apply a unique style to a single HTML element. S

How to Change Line Spacing in CSS?

The line-height property in CSS is used to adjust line spacing between lines of text.Syntaxline-height: value;Example 1: In this example, we will increase the line height using the CSS line-height property.HTML<h3>Paragraph with Default Line Spacing</h3> <p> HTML stands for HyperTe

How to add horizontal line in HTML ?

Creating a visually appealing and well-structured webpage often involves the use of horizontal lines. These lines help separate different sections of content, making it easier for users to read and understand the information presented. In this guide, weâ€™ll explore two effective methods to add horizo

How to create a New Line in PHP ?

When working with text output in PHP, like creating a webpage, sending an email, or saving to a file, it's important to know how to add a new line. Adding a new line helps break up the text, makes it easier to read, and keeps it looking right whether it's shown in a browser, a terminal, or a file.Ho

How To Add Border In HTML?

Adding Borders to HTML elements is a common way to enhance the presentation and layout of web pages. Borders can be added to divs, paragraphs, images, and tables to separate or highlight content visually. CSS can provide several properties to customize the borders, such as color, style, and width.Th

Adding CSS (Cascading Style Sheets) to your HTML is essential for creating visually appealing and user-friendly web pages. In this guide, we will explore the three primary methods to link CSS to HTML documents: inline, internal, and external CSS. Each method has its advantages and best-use scenarios

How to set a single line break in HTML5 ?

In this article, we will add a single line break using the <br> tag. It s used to give the single line break. It is the empty tag so it does not contain end tag. Syntax: <br> Example 1: This example uses <br> tag to break the line. html <!DOCTYPE html> <html> <head

How to add line break using <br> Tag in HTML?

The <br> tag is used to create a line break in HTML. It allows you to break text into a new line without starting a new paragraph or block. This is helpful when you need to format text in a specific way, like in poems or addresses. For adding a line break, simply insert the <br> tag wher

How to add line breaks to an HTML textarea?

Line breaks in an HTML textarea refer to the inclusion of newline characters (\n) that separate lines of text within the textarea. When users press Enter or Return, a line break is created, making text easier to read and format within the form element.The way of implementing line breaks differs from