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
Managing Spacing Between Words with CSS wordspacing Property
By defining the CSS word-spacing property, we can set the amount of white space between the words. The whitespace between the words can be increased or decreased. It can be set in the following CSS units: px, pt, em, cm, etc. Let us see the syntax.
Syntax
The following is the syntax of the word-spacing property −
word-spacing: value;
The value can be −
normal − Normal spacing between words
length − Space between words set in pt, px, cm, etc.
The following examples illustrate CSS word-spacing property.
Word Spacing in cm
The word spacing can be set in px, pt, cm, em, etc. units using the word-spacing property −
div {
margin: 2%;
padding: 2%;
background-color: mediumorchid;
color: ivory;
word-spacing: 2.2cm;
}
Example
Let us see an example. We have also set normal word spacing using the normal value of the word-spacing property −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 2%;
padding: 2%;
background-color: mediumorchid;
color: ivory;
word-spacing: 2.2cm;
}
div:last-of-type {
word-spacing: normal;
}
</style>
</head>
<body>
<div>I Don't Care! I Love It!</div>
<div>I Don't Care! I Love It!</div>
</body>
</html>
Word Spacing in px
The word spacing can be set in px, pt, cm, em, etc. units using the word-spacing property. We have the word spacing in px (pixels) units −
article {
margin: 2%;
padding: 2%;
background-color: azure;
word-spacing: 20px;
}
Example
Let us see an example. We have also set normal word spacing using the normal value of the word-spacing property −
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: 2%;
padding: 2%;
background-color: azure;
word-spacing: 20px;
}
article:last-of-type {
word-spacing: normal;
}
</style>
</head>
<body>
<article>tldr; this article doesn;t mean anything</article>
<article>0123456789 is not a phone number</article>
</body>
</html>
159 Views
