Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set the spacing between words in a text in 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.
4K+ Views
