×

Html & Html5

The World's best Software Development Study Portal

CSS3

Introduction to CSS


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