White-space Property in CSS3

How to handle the white space inside an element in CSS3?

By using white-space property we can handle the white space inside an element.

<style>
        .class1{
            white-space:normal;
        }
        .class2 {
            white-space:pre;
        }
</style>

<body>
    <h3>White-space property with value 'normal'</h3>
    <p class="class1">
        SN ITFunda Service LLP,
        SVH Plaza,
        Opposite to KFC,
        Miyapur,
        Hyderabad-500049.
    </p>
    <h3>White-space property with value 'pre'</h3>
    <p class="class2">
        SN ITFunda Service LLP,
        SVH Plaza,
        Opposite to KFC,
        Miyapur,
        Hyderabad-500049.
    </p>
</body>

In the above code snippet we have given white-space property to the .class selector. .class selector selects the <p> elements and applies the style to it. The white-space property with value "normal" gives the single line text, the white-space property with value "pre" gives the same number of text lines how we enter inside the <p> element.

OUTPUT

Views: 4393 | Post Order: 87

CSS3 > Texts

White-space Property in CSS3

How to handle the white space inside an element in CSS3?

Related Posts

Utility Tools