CSS text over flow why isn't this working

I want the text in the header to be shortned with ellipses. but it doesn't the whole address shows in one line

<table border="0" style="font-weight:normal; position: absolute; top:45; left: 0;">      
    <th align="left" style="" width="10%">
         <span style=" overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width:10px; font-weight:normal; whit开发者_如何学编程e;" 
                onclick="dropdownResize()"><i>Address</i> &nbsp; <b>${bean.address}</b></span>
    </th>
     <tr >
      <td style=" border-style:solid; border-width:0px; text-transform:capitalize; text-indent:1px;">
    </br>
    <br>Usual address <br><b>${bean.address}</b></br> <br> 
    </td>       
     </tr>
</table>

You have a lot of stuff wrong with your code,

For a start you are using <b> <i> as well as using <table>s to layout your content (which is by the way a bad practise) AND you are using <br> </br> which aren't even real tags - the tag you are looking for is <br/> - It is a self closing tag as it can never contain any arguments or content.

The <span> tags you have chose to use do not support the width parameter as they just wrap the text that is contained within them and as such I have changed this to a <div> and changed all your <b> and <i> tags to <span> tags with CSS classes attached to them.

I have fixed up your coding here:

Live Demo

As for your table layout I suggest you read a few of these:

http://shouldiusetablesforlayout.com/

http://www.hotdesign.com/seybold/

http://webdesign.about.com/od/layout/a/aa111102a.htm

http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm

Next up, support:

FF4 does not support the text-overflow:ellipsis as it used to in FF3.6 via a hack, see here for further info:

text-overflow:ellipsis in Firefox 4? (and FF5)

You're using a <span> which by default is an inline element and cannot receive width, height, etc like block level elements.

To change this, either use a div or add display: block; to your span's style.

Try adding display:block to the style on the span tag.

Make sure you test it in supported browsers: http://www.quirksmode.org/css/textoverflow.html

Firefox doesn't support ellipsis.