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...