Question

如何将省略号添加到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

Answer 1

尝试使用CSS规则

.content

Answer 2

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

＆＃13;

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

＆＃13;

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

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

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

2 个答案: