How to insert line break before an element using CSS?

The white-space property is used to insert the line break before an element. This property controls the text wrapping and white-spacing.

Line break between the lines: The line break can be added between the line of text. The white-space: preline; is used to insert line break before an element.

Example 1:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Insert line break 
        before an element 
    </title> 
      
    <!-- CSS style to insert line break 
        before an element -->
    <style> 
        p {  
            color:green; 
            white-space: pre-line; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
      
    <h2> 
        Insert line break before an  
        element 
    </h2> 
      
    <p> 
        Data Structure 
        Algorithm 
        Computer Networks 
        Web Technology 
    </p> 
</body> 
  
</html>                     

Output:

Line-break between HTML Elements: The line-break between HTML elements can be added by using CSS properties. There are two methods to force inline elements to add new line.

Using display property: A block-level element starts on a new line, and takes up the entire width available to it.
Using carriage return character (\A): We can add a new-line by using the ::before or ::after pseudo-elements.

Example 2:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Insert line break and content 
        before an element 
    </title> 
  
    <!--It adds the GeeksforGeeks 
        A computer science portal -->
    <style> 
        p::before { 
            color:green; 
            content: "GeeksforGeeks \A " 
                "A computer science portal"; 
            display: block; 
            white-space: pre; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
      
    <h2> 
        Insert content and line break 
        before an element 
    </h2> 
      
    <p>Data Structure</p> 
    <p>Algorithm</p> 
</body> 
  
</html>                     

Output:

Example 3: This example uses carriage return character “\A” to add line break before an element.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Insert line break 
        before an element 
    </title> 
  
    <!-- Style to add the line break -->
    <style> 
        p::before { 
            content: "\A"; 
            white-space: pre; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
      
    <h2> 
        Insert line break 
        before an element 
    </h2> 
      
    <p>Data Structure</p> 
    <p>Algorithm</p> 
    <p>Operating System</p> 
</body> 
  
</html>                     

Output:

My Personal Notes

Recommended Posts: