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:
Article Tags :
Recommended Articles