How To Break Line Without Using
Tag In CSS - W3docs

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

Có thể bạn quan tâm

There are a few ways to break a line without using a <br> tag. For that, we can use block-level elements.

Block-level elements start on a new line by default (if a CSS rule does not override the default behavior). Here, you can find how to make inline elements start on a new line.

In this snippet, we’ll use the following properties:

  • white-space: pre for making elements act like <pre>,
  • display: block for representing an element as a block element.

Let’s see how to break a line using the white-space property. This property specifies how the white space within an element must be handled. A white space can be a space sequence or a line break.

Create HTML

  • Use <h1> and <div> elements.
<h1>W3Docs</h1> <div> Example Example </div>

Add CSS

  • Use the text-align property set to “center” for the <body> element.
  • Add color to <h1>.
  • Use the white-space property set to “pre” for the <div> element.
body { text-align: center; } h1 { color: #000000; } div { white-space: pre; }

Let’s see the result of our code.

Example of breaking a line using the white-space property:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> body { text-align: center; } h1 { color: #000000; } div { white-space: pre; } </style> </head> <body> <h1>W3Docs</h1> <div> Example Example </div> </body> </html> Try it Yourself »

Result

W3Docs Example Example

Next, we’ll show how to break a line with the display property. We need to set display: block to represent an element as a block element. In the following example, we set display: block to the <span> element which is inside a <p> element.

Example of breaking a line using the display property:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> body { text-align: center; } h1 { color: #000000; } p span { display: block; } </style> </head> <body> <h1> W3Docs </h1> <p> <span>Example_1</span> <span>Example_2</span> </p> </body> </html> Try it Yourself »

Also, you can use the carriage return character (\A) as content in pseudo-element.

It is possible to add a new line using ::before and ::after pseudo-elements.

Example of breaking a line using the ::after pseudo-element:

<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .line:after { content: '\A'; white-space: pre; } </style> </head> <body> <h3> <span class="line">This is the first line</span> <span class="secondary-label">second line</span> </h3> </body> </html> Try it Yourself »

Từ khóa » Html Br Alternatives