Как добавить многоточие в столбец jQGrid headerText

Question

Как добавить многоточие в столбец jTGrid headerText.

Текущий заголовок Html столбца для jqGrid выглядит так:

<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

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

Answer 2

Так как .s-ico тег span внутри .ui-jqgrid-sortable установлен в display:none Вы можете использовать псевдоэлемент, чтобы добавить многоточие к тексту:

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

Если диапазон будет переключен на display:block затем вам нужно обернуть нужный текст в другой элемент и применить к этому правилу css.

PS: @ Олег решение будет работать, только если вы установите заголовок overflow в hidden и контент на самом деле выходит из своего контейнера.