CSS3 > Texts

Word-spacing Property in CSS3

How to increase or decrease the space between words in CSS3?


By using word-spacing property we can increase or decrease the space between the words.

<style>
        .S {
            word-spacing: normal;
        }

        .N {
            word-spacing: 10px;
        }

        .I {
            word-spacing: 20px;
        }

        .T {
            word-spacing: -10px;
        }
</style>

<body>
    <h5>Paragraph with normal word spacing.</h5>
    <p class="S">
        Mr. Sheo Narayan is a software professional since 2000.
    </p>
    <h5>Paragraph with '10px' word spacing.</h5>
    <p class="N">
        Mr. Sheo Narayan is a software professional since 2000.
    </p>
    <h5>Paragraph with '20px' word spacing.</h5>
    <p class="I">
        Mr. Sheo Narayan is a software professional since 2000.
    </p>
    <h5>Paragraph with '-10px' word spacing.</h5>
    <p class="T">
        Mr. Sheo Narayan is a software professional since 2000.
    </p>
    <br />
</body>

In the above code snippet we have given word-spacing property to the .class (.S.N.I.T)selectors. The word-spacing property with value "normal" gives the normal space between the words in a text. The word-spacing property with value "10px" increases 10 pixel space between the words in a text. The word-spacing property with value "20px" increses the 20 pixel space between the words in a text. The word-spacing property with value "-10px" decreses the 10 pixel space between the words in a text. 

OUTPUT

 Views: 594 | Post Order: 89



Write for us