Word-break Property in CSS3

How to break words between any two letters in CSS3?

By using word-break property we can break words between any two letters.

<style>
        div {
            word-break: break-all;
            width: 250px;
            border: solid;
        }

        p {
            word-break: keep-all;
            width: 250px;
            border: dotted;
        }
</style>

<body>
    <h4>Break at any character</h4>
    <div>
        Mr. Sheo Narayan is a software professional since 2000 and working in .NET Technologies since its first release.
        He has been awarded with Microsoft® Most-Valuable-Professional-(MVP), Star Entrepreneur Award etc.
    </div>
    <h4>Break at special characters</h4>
    <p>
        Mr. Sheo Narayan is a software professional since 2000 and working in .NET Technologies since its first release.
      He has been awarded with Microsoft® Most-Valuable-Professional-(MVP), Star Entrepreneur Award etc.
    </p>
</body>

In the above code snippet we have given word-break property with value "break-all" to the <div> element and "keep-all" to the <p> element. The word-break property with value "break-all" breaks the line at any character, the word-break property with value "keep-all" breaks the line at special characters.

OUTPUT

Views: 3452 | Post Order: 86

CSS3 > Texts

Word-break Property in CSS3

How to break words between any two letters in CSS3?

Related Posts

Utility Tools