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:
Please Login to comment...