not able to do max width

Question

Hi

I have a page which has a content like this...

<div id="content">
testingtestingtestingtestingtestingtestingtestingtestingtesting
testingtestingtestingtestingtestingtestingtestingtesting
testingtestingtestingtestingtesting
</div>

How do i apply a max-width on it . I m using this code in the css

#content {
    max-width:50px; /* for standards-compliant browsers */
   /*width:expression(document.body.clientwidth > 650? "650px": "auto" );*/ 
   /* max-width expression for IE only */
}

but i m not getting the results in firefox... http://pradyut.dyndns.org/WebApplicationSecurity/width.jsp

Are there any JavaScript solutions?
Any help
thanks
Pradyut

Answer 1

Your element must be a block element.

Answer 2

Well the reason why you not getting the expected result on the page you provided by the link is that you are using a span instead of a div.

Add

display: block;

to you style.

Answer 3

If you used your own example you would find that it works just fine. The page you linked to uses a span element, which is an inline element by default. Inline elements cannot have width or height. If you want to set max width on a span element, set it's display to block or inline-block:

<span id="content" style="max-width:50px; display:block;" >  
testingtestingtestingtestingtestingtestingtestingtestingtesting  
testingtestingtestingtestingtestingtestingtestingtesting  
testingtestingtestingtestingtesting  
</span>

Answer 4

So, in your CSS, you can set the word-wrap property to break-word so that your string of text (w/ no whitespace) will be made to fit into the max-width:

E.g.

<style type="text/css">

#content {
    max-width: 50px;
    word-wrap: break-word;
}

</style>