Restrict text area in css

Question

I tried to restrict the area where I can write text on my website.

<div id="header">
<div id="text"> 
     sample text 
</div>
</div>

When I try to write many characters in text , there is no line break when the given space is exceeded.

#header
{
 background-color: #fff;
 height: 100px;

}

#text
{
 margin-left: 200px;
 width: 200px;
}

What is my mistake?

Answer 1

Do this way:-

#text
{
    margin-left: 200px;
    width: 200px;
    border: 1px solid;
    word-wrap: break-word;  
}​

Refer LIVE DEMO

Answer 2

If you are trying to perform word-wrapping, the following will work.

#text{ 
   word-wrap: break-word;      /* Most modern browsers */       
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* older versions of Opera */   

}

The word-wrap property isn't limited to newer browsers only. Older browsers seem to support it as well.

From the CSS3 draft,

For legacy reasons, certain experimental CSS properties do not follow this prefixing convention. Two common examples are the 'word-wrap' and 'text-overflow' properties, which were introduced unprefixed by Microsoft Internet Explorer prior to the introduction of the vendor prefixing policy in CSS2.1 and were subsequently implemented unprefixed by other browsers, creating a dependency on the unprefixed names despite the lack of a W3C spec.

See article here and w3c reference .