CSS Word Wrap

CSS Word Wrap:

CSS word wrap property is used to break the long words and wrap onto the next line. This property is used to avoid overflow when an unbreakable string is too long to fit in the containing box.

value Description
normal This property is used to break words only at allowed break points.
break-word It is used to break unbreakable words.
initial It is used to set this property to its default value.
inherit It inherits this property from its parent element.
Example

<!DOCTYPE html>

<html>

<head>

<style>

p.test

{

width: 11em;

background-color: #00ffff;

border: 1px solid #000000;

padding:10px; word-wrap: break-word;

}

</style>

</head>

<body>

<p class=”test”>

In this paragraph, there is a very long word: iamsooooooooooooooooooooooooooooooolongggggggggggggggg.The long word will break and wrap to the next line.</p>

</body>

</html>

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *