使用 jquery/css 缩写 <table> 列中的文本答案

【问题标题】：abbreviate text in <table> column with jquery/css使用 jquery/css 缩写 <table> 列中的文本
【发布时间】：2011-08-23 16:12:06
【问题描述】：

我有一个 jquery 数据表 (http://www.datatables.net/)，其中一列有一个较大的文本字段。目前，列内容包含在<td> 中，但我希望将内容缩写，即用户看到“这是非常长的内容......”而没有任何换行。我已经有一个 jQuery click，它会打开一个 jquery ui 对话框来显示完整的文本，所以我不担心那部分。

我唯一能想到的是在我的控制器中使用 Apache StringUtils.abbreviate(String s, int length) 方法来获取缩写文本，并且我可以选择一些适合列大小的长度。不过我真的不喜欢这个主意。

我想知道是否有一些 jQuery 插件，或 css 技巧，或者可以在浏览器中为我执行此操作的东西，以便它适用于任何 <td> 列宽。

【问题讨论】：

标签： jquery css

【解决方案1】：

试试这个方便的jQuery plugin。

【讨论】：

【解决方案2】：

这是我们在 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>
    }

【讨论】：

【解决方案3】：

对于纯 CSS 解决方案，您可以使用 text-overflow CSS property。除 Firefox 外，主流浏览器（甚至 IE6！）都支持此属性。

这个question on SO 可能有助于在 Firefox 中获得相同的效果

【讨论】：