Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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 using 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 easy-to-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. You can set the value of your wordSpacing property to either a positive or negative value. For instance, you can set the spacing between words to be either 50px or -50px depending on your needs.
Syntax
object.style.wordSpacing = "normal | length | initial | inherit"
Parameters
- 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 1: Setting Positive Word Spacing
In this example, we will use the wordSpacing property to set the spacing between words 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>
document.getElementById("myText").style.wordSpacing = "50px";
</script>
</body>
</html>
Example 2: Setting Negative Word Spacing
In this example, we will set the length between the spacing of the words to a negative value of -30px.
<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>
document.getElementById("myText").style.wordSpacing = "-30px";
</script>
</body>
</html>
Example 3: Setting Normal Word Spacing
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>
document.getElementById("myText").style.wordSpacing = "normal";
</script>
</body>
</html>
Browser Compatibility
This JavaScript property is compatible with all major browsers, including Google Chrome, Safari, Internet Explorer, Opera, Chromium, and Mozilla Firefox.
Conclusion
The wordSpacing property provides a simple way to control text spacing in web pages. You can use positive values to increase spacing, negative values to decrease it, or "normal" for default spacing.
5K+ Views
