Word-wrap Property in CSS3

How to break and wrap the long words onto the next line in CSS3?

By using word-wrap property we can break and wrap the long words onto the next line.

<style>
        p {
            word-wrap: normal;
            width: 12em;
            border: solid;
        }

        div {
            word-wrap: break-word;
            width: 12em;
            border: solid;
        }
</style>

<body>
    <strong>Word-wrap property with value normal</strong>
    <p>
        This is SN ITFunda Service Private Ltd...!!, OooooooooHhhhhhhhhhMyyyyyyy God. Yes it is.
    </p>
    <strong>Word-wrap property with value 12em</strong>
    <div>
        This is SN ITFunda Service Private Ltd...!!, OooooooooHhhhhhhhhhMyyyyyyy God. Yes it is.
    </div>
</body>

In the above code snippet we have given word-wrap property with value "normal" to the <p> element, value "break-word" to the <div> element. The word-wrap property with value "normal" can not break and wrap the long word to the next line, the word-wrap property with value "break-word" can break and wrap the long word to the next line.

OUTPUT

Views: 3639 | Post Order: 90

CSS3 > Texts

Word-wrap Property in CSS3

How to break and wrap the long words onto the next line in CSS3?

Related Posts

Utility Tools