abbreviate text in <table> column with jquery/css

i've got a jquery datatable (http://www.datatables.net/), and one column has a largish text field. Currently the column contents wrap in the <td>, but I'd like to instea开发者_运维技巧d have the contents abbreviated, i.e. the user sees "This is really long contents ..." without any line wrap. I already have a jQuery click that opens up a jquery ui dialog to show the complete text, so I'm not worried about that part.

The only thing I can think of is to use Apache StringUtils.abbreviate(String s, int length) method in my controller to get the abbreviated text, and I can pick some length appropriate for the column size. I don't really like that idea though.

I'm wondering if there's some jQuery plugin, or css trick, or something that will do this for me in the browser so that it works for any <td> column width.

For a pure CSS solution you could use the text-overflow CSS property. This property is supported in major browsers (even IE6!) except for Firefox.

This question on SO might help get the same effect in Firefox

Try this handy jQuery plugin.

Here's what we do in Razor:

   @foreach (var item in Model) {
    <tr data-id="@item.StudyDesignID">
        <td>
            @(item.FieldName.Length > 42 ? item.FieldName.Substring(0, 39) + " ..." : item.FieldName)
        </td>
      </tr>
    }