Word Spacing

CSS provides the ability to adjust the word spacing within your text. In other words, when creating a web page or blog, you can specify the space between each word in your text. This article shows you how to adjust the word spacing in your HTML documents.

To adjust the word spacing of your text, you need to use the CSS word-spacing property. The value that you provide determines the space between each word.

Below are some examples using different values for the word-spacing property.

Word Spacing Examples

Here are examples of the different value types that you can specify on the word-spacing property. For example, if you write word-spacing:3px;, you are specifying that there should be 3 extra pixels between each word.

Source Code

Result

<!-- Codes by HTMLcodes.me --> <p style="width:180px;float:left;background-color:#ffc;">Normal text: This text does not have its word-spacing specified. Therefore it uses a default value.</p> <p style="word-spacing:8px;width:180px;float:right;background-color:#eee;">Adjusted word-spacing: This text has got word-spacing value of 8 pixels.</p> <p style="word-spacing:0.4cm;width:180px;float:left;background-color:#eee;">Adjusted word-spacing: This text has got word-spacing value of 0.4 centimeter.</p> <p style="word-spacing:1em;width:180px;float:right;background-color:#eee;">Adjusted word-spacing: This text has got word-spacing value of 1em.</p> <p style="word-spacing:-2px;width:180px;float:left;background-color:#eee;">Adjusted word-spacing: This text has got word-spacing value of negative 2 pixels.</p> <p style="word-spacing:-0.1cm;width:180px;float:right;background-color:#eee;">Adjusted word-spacing: This text has got word-spacing value of negative 0.1 centimeter.</p> <p style="word-spacing:-0.8em;width:180px;float:left;background-color:#eee;">Adjusted word-spacing: This text has got word-spacing value of negative 0.8em.</p> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/word-spacing.cfm">Word spacing</a></p>

Normal text: This text does not have its word-spacing specified. Therefore it uses a default value. Adjusted word-spacing: This text has got word-spacing value of 8 pixels. Adjusted word-spacing: This text has got word-spacing value of 0.4 centimeter. Adjusted word-spacing: This text has got word-spacing value of 1em. Adjusted word-spacing: This text has got word-spacing value of negative 2 pixels. Adjusted word-spacing: This text has got word-spacing value of negative 0.1 centimeter. Adjusted word-spacing: This text has got word-spacing value of negative 0.8em.