CSS word-spacing properties and usage

 The CSS word-spacing property is used to design the horizontal distance between words on a web page. The usage is similar to letter-spacing , except that word-spacing controls words (or paragraphs) instead of single letters, while letter-spacing controls The distance between single characters. Another feature of the CSS word-spacing property is that when encountering Chinese characters, white space is regarded as the separation of words. For example, "Good morning and hello" will be regarded as a single word, and "Good morning and hello" will be It is treated as two words because there is an extra space in the middle. A more complete effect will be presented in an example later. Almost all mainstream browsers support the effect of the CSS word-spacing property. The following are the basic grammatical rules.

CSS word-spacing basic syntax

word-spacing: distance value;

The CSS word-spacing parameter "distance value" has three modes, namely normal, length, and inherit. The description is as follows:

• word-spacing: normal; //The default value, the horizontal distance between words or paragraphs is the default effect.
• word-spacing: length; //Design additional horizontal distance between words or paragraphs, available units such as cm, em, px... etc.
• word-spacing:inherit; //The word-spacing attribute value inherited from the parent layer.
  

The third attribute value inherit is not supported by all browsers and is not recommended.

CSS word-spacing example

<div style=" word-spacing: -5px; border:2px #ccc solid;">Good morning, John.</div>
<div style=" word-spacing: 30px; border:2px #ccc solid;"> Good morning, John.</div>
<div style=" word-spacing: 30px; border:2px #ccc solid;">This is a test example. This is a test example. This is a test example</div>

The results are as follows

Good morning, John.

Good morning, John.

This is a test example This is a test example This is a test example

In the example, a total of three columns are prepared to show different word-spacing attribute effects. The first DIV block is set to " word-spacing: -5px; " to make the distance between paragraphs -5. As a result, the original horizontal spacing disappears. So, word-spacing can also have negative values. The second DIV block increases the horizontal distance between English words by 30px, and the third DIV is used to test that word-spacing can also work normally for paragraph processing of traditional Chinese characters.