Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Break a Line Without Using br Tag in HTML CSS
To break a line without using br tag in HTML/CSS, is useful where you want space between elements, but don't want to add a new line of text. In this article, we will be discussing two different approaches to break line without using br tag.
We are having some textual content in our HTML document in this article, our task is to break line without using br tag in HTML/CSS.
Approaches to Break Line Without br Tag
Here is a list of approaches to break a line without using br tag in HTML/CSS which we will be discussing in this article with step wise explaination and complete example codes.
Break Line using white-space Property
To break a line without using br tag in HTML/CSS, we have used CSS white-space property which controls the white space flow inside the text in an element.
- We have used "white-space: pre;" property in container class.
- The pre value of white-space property preserves the white spaces exactly as they are in the HTML code.
Example
Here is a complete example code implementing above mentioned steps to break a line using CSS white-space property.
<html>
<head>
<title>
To Break a Line Without Using br
Tag in HTML/CSS
</title>
<style>
.container {
white-space: pre;
}
</style>
</head>
<body>
<h3>
To Break a Line Without Using br
Tag in HTML/CSS
</h3>
<p>
In this example we have used CSS
<strong>white-space</strong> property
to break a line without using br tag
in HTML/CSS.
</p>
<div class="container">
First line
Second line
</div>
</body>
</html>
Break Line using pre Tag
In this approach to break a line without using br tag in HTML/CSS, we have used HTML pre tag. It defines a pre-formatted text which is displayed exactly as written in the HTML code preserving line breaks.
Example
Here is a complete example code implementing above mentioned steps to break a line using HTML pre tag.
<html>
<head>
<title>
To Break a Line Without Using br
Tag in HTML/CSS
</title>
</head>
<body>
<h3>
To Break a Line Without Using br
Tag in HTML/CSS
</h3>
<p>
In this example we have used HTML
<strong>pre</strong> tag to break
a line without using br tag in
HTML/CSS.
</p>
<pre>
First line
Second line
</pre>
</body>
</html>
Conclusion
To break a line without using br tag in HTML/CSS is a simple process. In this article we have discussed two different approaches which are: by using CSS white-space property and by using HTML pre tag.
4K+ Views
