×

Html & Html5

The World's best Software Development Study Portal

CSS Word wrap


If we want our text to be fit in the containing box than this property helps us a lot. It will break the long words and wrap up on the next line.

Let's understand this by the following program:-


<!DOCTYPE html>

<html>

<head>

<style>

p.demo {

      width: 200px;

      background-color:green;

      border: 2px solid blue;

      padding:10px;

      word-wrap: break-word;

}

</style>

</head>

<body>

<p class="demo> See our this big paragraph words are coming on to theeeeeeeeeeeeeeee

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee next line. </p>

</body>

</html>


Output of the Program



See our this big paragraph words are coming on to theeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee next line.

So this is what the word-wrap responsible for.


Some more values of word-wrap property.These are mentioned below with description


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.





CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute