HTML DOM Style wordSpacing Property

HTML Web Development Front End Technology

The HTML DOM style wordSpacing property returns and modify the spacing between words in a text in an HTML document.

Syntax

Following is the syntax −

Returning wordSpacing

object.style.wordSpacing

Modifying wordSpacing

object.style.wordSpacing = “value”

Values

Here, value can be −

Value	Explanation
initial	It set this property value to its default value.
inherit	It inherits this property value from its parent element.
normal	It sets normal spacing between words.
length	It defines the spacing between words in terms of length units.

Example

Let us see an example of HTML DOM style wordSpacing property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem 0;
   }
</style>
</head>
<body>
<h1>DOM Style wordSpacing Property Example</h1>
<p>This is a paragraph element.</p>
<button onclick="add()" class="btn">Change wordSpacing</button>
<script>
   function add() {
      document.querySelector('p').style.wordSpacing = "30px"
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on “Change wordSpacing” button to change the word spacing −

AmitDiwan

Updated on: 01-Jul-2020

24 Views

Kickstart Your Career

Get certified by completing the course

Get Started