How to Set the Distance between Lines in a Text with JavaScript ?

Last Updated : 05 Aug, 2024

In this article, we will see how to create a user-defined space between two consecutive lines to beautify the view using JavaScript. To set the distance between lines, we can use the line height Property. The line-height property is used to set or return the distance between lines in a text.

Syntax: The Syntax for the line-Height property is as followed. Set the line height for an <div> element using the following syntax:

line-height: normal|number|length|percentage|initial|inherit;

Approach:

We create a simple HTML file named "demo.html" as shown in the below code.
We use Heading 1 as our heading for the HTML code and create three consecutive lines displaying GeeksForGeeks.
We also set a button named "Set distance between lines" to set the distance between two consecutive lines by a given value on clicking it.
Now inside the script tag, we write our JavaScript code which calls the "myID" tag from the HTML code and changes the styling of the content inside the tag. It uses the line-Height property to specify the distance between two consecutive lines by a value of 3(as shown in the code below). As we do not provide any units to the Line-Height value, it will interpret the distance between lines to be a multiple of the current font size to set the line height.
Finally, we end all the tags, and the corresponding output before and after clicking the "Set distance between lines" button has been provided below.

Example 1: In this example, we can try to run the following code to set the distance between lines in a text with JavaScript.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            text-align: center;
        }
        #myID {
            width: 100%;
        }
    </style>
</head>
<body>
    <h1>Heading 1</h1>
    <p id="myID">GeeksForGeeks.<br>GeeksForGeeks<br>GeeksForGeeks</p>
    <button type="button" onclick="display()">
        Set distance between lines
    </button>
    <script>
        function display() {
            document.getElementById("myID").style.lineHeight = "3";
        }
    </script>
</body>
</html>

Output: Initial output and after clicking the "Set distance between lines" button, the below output is generated as shown in the gif below.

Example 2: In this example, we are using the above approach but here instead of using the line-height value to be a unitless number, here, we specify the units for the distance between lines in pixels, points, centimeters whatever we want.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Heading 1</h1>
    <p id="myID">GeeksForGeeks.<br>GeeksForGeeks<br>GeeksForGeeks</p>
    <button type="button" onclick="display()">
        Set distance between lines
    </button>
    <script>
        function display() {
            document.getElementById("myID").style.lineHeight = "30px";
        }
    </script>
</body>
</html>

Output: The outputs of the above programs are shown as follows, before and after clicking on the "Set distance between lines" button.

How to break JavaScript Code into several lines ?

pritamauddy25

Improve

Article Tags :

How to Set the Distance between Lines in a Text with JavaScript ?

Similar Reads

Thank You!

What kind of Experience do you want to share?