The word-spacing property in CSS is your solution to managing the white space between words. With only two values - normal and length, it’s a straightforward way to enhance readability.
Syntax:
word-spacing: normal|length|initial|inherit;Property values:
1. Normal: It defines normal space between words which is 0.25em. This is default value.
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | word-spacing Property
</title>
</head>
<body>
<h1>The word-spacing Property</h1>
<h2>word-spacing: normal:</h2>
<p style=" word-spacing: normal;
color:green;
font-weight:bold;
font-size:25px;">
This is some text. This is some text.
</p>
</body>
</html>
Output:
2. Length: It defines an additional space between words (in px, pt, cm, em, etc). Negative values are also allowed.
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | word-spacing Property
</title>
</head>
<body>
<h1>The word-spacing Property</h1>
<h2>word-spacing: length is 20px</h2>
<p style=" word-spacing:20px;
color:green;
font-weight:bold;
font-size:25px;">
GeeksforGeeks - A Computer Science Portal For Geeks!
</p>
</body>
</html>
Output:
Example: Length to Negative Value
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | word-spacing Property
</title>
</head>
<body>
<h1>The word-spacing Property</h1>
<h2>word-spacing: length is -20px</h2>
<p style="word-spacing:-20px;
color:green;
font-weight:bold;
font-size:25px;">
GeeksforGeeks - A Computer Science Portal For Geeks!
</p>
</body>
</html>
Output:
Supported browsers: The browsers supported by word-spacing Property are listed below:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 6.0
- Firefox 1.0
- Opera 3.5
- Safari 1.0