Set Spacing Between Words in Text Using JavaScript

In this article, we will learn how to set the spacing between words in a text in JavaScript.

Word spacing is critical on websites because it improves the legibility and readability of the text displayed on the page. You can generate an aesthetically pleasing and easyto-read typeface using proper word spacing.

In JavaScript, we use the wordSpacing Property to set the spacing between the words in a text displayed on a website.

Using the Style wordSpacing Property

This JavaScript DOM property is used to get and set the spacing between the words in a text

Depending on your needs, you can set the value of your wordSpacing Property to either a positive or a negative value. For instance, depending on your needs, you can set the value of the spacing between words to be either 50 px or -50px

Compatibility with Web Browsers

This JavaScript property is compatible with browsers, including Google Chrome, Safari, Internet Explorer, Opera, Chromium, and Mozilla Firefox.

Syntax

To implement this JavaScript property in your text, you should follow the following syntax below ?

object.style.wordSpacing = "normal | length | initial | inherit"

Parameter

  • normal ? this is the default value of the spacing between words. When used, it returns the normal spaced words.
  • length ? specifies the space between the words. The values of length can either be positive or negative.
  • initial ? this value sets the Property to its default value
  • inherit ? this value is used to inherit the Property from its parent element.

Example

In this example, we will use the wordSpacing property to set the spacing between words. We are going to set our word spacing to 50px.


<html>
<head>
<style>
   #myText {
      font-family: sans-serif;
      font-weight: normal;
      font-size: 18px;
   }
</style>
</head>
<body>
   <h3> Setting the Spacing between words in a text in JavaScript using
   <i> wordSpacing </i> Property </h3>
   <p id="myText"> Some placeholder material for this multi-collapse
   example's initial collapse component. </p>
   <script>
      var output = document.getElementById("myText").style.wordSpacing="50px";
   </script>
</body>
</html>

Example 2

In this example, we will set the length between the spacing of the words to a negative value. We are going to set the value to -30 px.


<html>
<head>
<style>
   #myText {
      font-family: sans-serif;
      font-weight: normal;
      font-size: 18px;
   }
</style>
</head>
<body>
   <h3> Setting the Spacing between words in a text in JavaScript using
   <i> wordSpacing </i> Property </h3>
   <p id="myText"> Some placeholder material for this multi-collapse
   example's initial collapse component. </p>
   <script>
      var output=document.getElementById("myText").style.wordSpacing="-30px";
   </script>
</body>
</html>

Example 3

In this example, we will set the word spacing value to normal.


<html>
<head>
<style>
   #myText {
      font-family: sans-serif;
      font-weight: normal;
      font-size: 18px;
   }
</style>
</head>
<body>
   <h3> Setting the Spacing between words in a text in JavaScript using
   <i> wordSpacing </i> Property </h3>
   <p id="myText"> Some placeholder material for this multi-collapse
   example's initial collapse component. </p>
   <script>
      var output=document.getElementById("myText").style.wordSpacing=normal;
   </script>
</body>
</html>

This article taught us how to set the spacing between words in a text using JavaScript's wordSpacing Property. Using this Property, you can specify a negative, positive or normal value for the length between word spaces.

Updated on: 2022-11-22T07:26:09+05:30

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements