1

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; white;" 
                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>
Dave819
  • 573
  • 3
  • 10
  • 14

4 Answers4

2

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.

Kyle
  • 65,599
  • 28
  • 144
  • 152
2

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)

Community
  • 1
  • 1
Myles Gray
  • 8,711
  • 7
  • 48
  • 70
1

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

Gareth
  • 5,693
  • 3
  • 28
  • 37
1

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

Firefox doesn't support ellipsis.

Kriem
  • 8,666
  • 16
  • 72
  • 120
  • 1
    For current versions of Firefox, there is a hack that can work-around this and allow you to support ellipsis, but FF4 will remove the feature that allows the hack, so it's a bit of a step backward. See also my current question here on this topic: http://stackoverflow.com/questions/4927257/text-overflowellipsis-in-firefox-4 – Spudley Feb 18 '11 at 12:23