not able to do max width

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 browser开发者_运维问答s */
   /*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

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.

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>

#content {
    max-width: 50px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

You may like to remove display: inline-block; depending on the context of your element.

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>

Add spaces in between. I believe this occurs because css/html reads it as one word. eg..

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