Wrap contents of a table

In the following table how can the text be limited may be to show only 20 characters

  <table><tr><td>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy开发者_JAVA技巧yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</td></tr></table>

Thanks..

That is something that is better done server-side, especially if you want the rest of the line not to be accessible.

Also its not possible to exactly count the numbers of character in CSS. You could use a width set in em which is roughly the with of the letter M:

td {
  width: 20em;
  overflow: hidden;
}

If you can't do it server-side and it must be exactly 20 chars then you'll have to use JavaScript.

If you type "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG" this will produce

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

I have taken my example from a couple different websites on google. I have tested this on ff 5.0, IE 8.0, and Chrome 10. It works on all of them.

.wrapword{
white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
white-space: pre-wrap;       /* css-3 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
}

<table style="table-layout:fixed; width:400px">
    <tr>
        <td class="wrapword">
        </td>
    </tr>
</table>

You can try limit the width of the column:

td {
    width: 20em;
    overflow: hidden;
}

If you want to limit what is being shown in the cell to 20 characters, you could use some Jquery to set the cell to the substring of the cell.

<table><tr><td id="tableCell">yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</td></tr></table>

$("#tableCell").text($("#tableCell").text().substring(0,20))

Is there any reason you are using a table over a DIV or UL LI? Also if the content within the table is going to be generated in PHP you can use PHP more easily than javascript to display only 20 characters.

// Limit $summary to how many characters? $limit = 20; $summary = <<< summary Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text summary;

if (strlen($summary) > $limit) $summary = substr($summary, 0, strrpos(substr($summary, 0, $limit), ' ')) . '...'; echo $summary;