Javascript Reference - HTML DOM Style wordSpacing Property

The wordSpacing property sets or gets the distance between words.

Browser Support


`wordSpacing`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the wordSpacing property:

object.style.wordSpacing

Set the wordSpacing property:

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

Property Values

Value	Description
normal	Default value. Use normal distance between words.
length	Use length units. Negative values are allowed
initial	Set to default value
inherit	Inherit from parent element.

Technical Details

Default Value:	normal
Return Value:	A string representing the word-spacing property.
CSS Version	CSS1

Example

The following code shows how to set the space between words in a <p> element to 50 pixels:


<!DOCTYPE html>
<html>
<body>
<p id="myP">This is an example paragraph.</p>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!--   w w  w  .  ja va2 s .com-->
    document.getElementById("myP").style.wordSpacing = "50px";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to use negative values in word spacing.


<!DOCTYPE html>
<html>
<body>
<p id="myP">This is an example paragraph.</p>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!-- w  w  w.j  a va  2 s.  c  o m-->
    document.getElementById("myP").style.wordSpacing = "-3px";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the word spacing.


<!DOCTYPE html>
<html>
<body>
<p id="myP" style="word-spacing:10px;">This is an example paragraph.</p>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!--  ww w. j ava 2  s. co m-->
    console.log(document.getElementById("myP").style.wordSpacing);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to set the letterSpacing and the wordSpacing.


<!DOCTYPE html>
<html>
<body>
<!--   w  w  w  .j  a  v a 2s.  c  o m-->
<p id="myP1">This is an example paragraph.</p>
<p id="myP2">This is an example paragraph.</p>

<button type="button" onclick="changeLetters()">letter spacing</button>
<button type="button" onclick="changeWords()">word spacing</button>

<script>
function changeLetters() {
    document.getElementById("myP1").style.letterSpacing = "15px";
}

function changeWords() {
    document.getElementById("myP2").style.wordSpacing = "15px";
}
</script>

</body>
</html>

The code above is rendered as follows: