not able to do max width

Question

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

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 2

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>

Answer 3

#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.