如何将省略号添加到 jQGrid 列 headerText答案

【问题标题】：How to add ellipsis to jQGrid column headerText如何将省略号添加到 jQGrid 列 headerText
【发布时间】：2015-08-06 15:49:33
【问题描述】：

如何在 jQGrid 列 headerText 中添加省略号。

jqGrid 的当前列 Html 标题如下：

<th id="ControlType" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 141px;">
<span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;">&nbsp;</span>
<div id="jqgh_PageGrid_ControlType" class="ui-jqgrid-sortable">
    W'ñÝÃáèTÿpê !!!_W<span class="s-ico" style="display:none">
        <span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span>
        <span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span>
    </span>

我想在标题中的“W'ñÝÃáèTÿpê !!!_W”中添加省略号。我不想编辑 jQGrid.js

【问题讨论】：

标签： javascript jquery jqgrid typescript jqxgrid

【解决方案1】：

尝试使用 CSS 规则

.ui-jqgrid .ui-jqgrid-labels .ui-th-column div { text-overflow: ellipsis }

【讨论】：

【解决方案2】：

由于.ui-jqgrid-sortable 中的.s-ico span 标签设置为display:none，您可以使用伪元素在文本中添加省略号：

.ui-jqgrid-sortable:after {
  content:"...";
}

如果跨度将切换到display:block，那么您需要将所需的文本包装到另一个元素中并将css规则应用于该元素。

P.S：@Oleg 的解决方案只有在您将标题 overflow 设置为 hidden 并且内容实际上从它的容器中流出时才有效。

【讨论】：

是的，默认图标是显示块。当我添加省略号时。图标也被切换（不是所需的选项）仅包装 div 中的文本将需要更改 jqGrid.js（我相信这是创建此 html 的位置）。并且我不允许对其 jQgrid.js 进行更改
我们能否以某种方式使用 jquery 将“W'ñÝÃáèTÿpê !!!_W”该文本包装到一个 div 中，这样就很容易了。 :)
@RohitKumar 检查一下：stackoverflow.com/questions/298750/… 然后您可以使用 jQuery wrap 方法包装文本节点：api.jquery.com/wrap