How To Break Line Without Using
Tag In HTML / CSS

Trang chủ » Html Br Alternatives » How To Break Line Without Using
Tag In HTML / CSS

Có thể bạn quan tâm

Breaking lines in HTML without <br> tags can be achieved using block-level elements such as <div> or <p> combined with CSS properties like display: block; or display: inline-block; and others. These elements naturally wrap text or content, facilitating clean and structured layout design without manual line breaks.

Below are the approaches to break lines without using <be> tag in HTML/CSS:

Table of Content

  • Using white-space property in CSS
  • Using display property

Using white-space property in CSS

In this approach, we are using the white-space property by assigning it to “pre”. That will align the content of any div into a separate line means it will successfully add the line breaks.

Example: This example uses white-space to pre to break the line.

html <!DOCTYPE html> <html> <head> <title> Line break without using br tag </title> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <div style="white-space: pre"> GeeksforGeeks GeeksforGeeks </div> </body> </html>

Output:

Using display property

This approach uses display property of CSS. we are assigning block as a value to the targeted div or element so that it can add a line break.

Example: This example uses display property to break the line.

html <!DOCTYPE html> <html> <head> <title> Line break using display property </title> <style> pspan{ display:block; } </style> </head> <body style = "text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <p> <span>GeeksforGeeks_1</span> <span>GeeksforGeeks_2</span> </p> </body> </html>

Output:

P

PranchalKatiyar Follow Improve Previous Article What does the CSS rule “clear: both” do? Next Article Set the size of background image using CSS ?

Từ khóa » Html Br Alternatives