Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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>
  
<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>
  
<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.

 


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!


Last Updated : 07 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads
Complete Tutorials