0

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

David Thomas
  • 249,100
  • 51
  • 377
  • 410
Kevin
  • 24,871
  • 19
  • 102
  • 158

3 Answers3

1

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

Community
  • 1
  • 1
Tim Banks
  • 7,099
  • 5
  • 31
  • 28
0

Try this handy jQuery plugin.

Kevin Ennis
  • 14,226
  • 2
  • 43
  • 44
0

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>
    }
Ciarán Bruen
  • 5,221
  • 13
  • 59
  • 69