How to use CSS In Javascript
You can simply use CSS to control the spacing between lines instead of adding <br> tags directly. This method is more accessible and provides consistent line spacing. Simply use white-space: pre-line; CSS property to the element or its parent to automatically create line breaks according to the content provided.
Example: This illustrates a webpage with a div element styled to preserve line breaks within its content.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.line-break {
white-space: pre-line;
}
</style>
</head>
<body>
<div id="myElement" class="line-break">
line one
line two
</div>
</body>
</html>
Output:
How to Make a Breakline in JavaScript for innerHTML?
In JavaScript, while working with HTML you will frequently need to add line breaks whether building a complex or simple web application. In this article, you will learn to insert line breaks in JavaScript’s innerHTML.
These are the following approaches:
Table of Content
- Using < br > Tag
- Using Template Literals
- By Creating Elements
- Using CSS