使用 Angular ui-grid 时的列标题换行 [英] Column header wrapping when using Angular ui-grid

问题描述

我已将我的 AngularJS SPA 应用程序从 ng-grid v2.0.7 升级到 ui-grid v3，并且我的列标题不再环绕.我的列标题现在是单行的，并在列标题不适合时显示省略号 ....

I have upgraded my AngularJS SPA application from ng-grid v2.0.7 to ui-grid v3 and my column headers no longer wrap around. My column headers are now single lined and show an ellipsis ... when the column header doesn't fit.

此功能是否已被删除或已被其他方法取代?

Has this feature been removed or is had it been superseded by a different method?

推荐答案

我相信我已经找到了一种通过覆盖 ui-grid-cell-contents CSS 类在标题列中包装文本的方法.

I believe I have found a way of wrapping text in the header columns by overriding the ui-grid-cell-contents CSS class.

.ui-grid-header-cell .ui-grid-cell-contents {
     height: 48px;
     white-space: normal;
     -ms-text-overflow: clip;
     -o-text-overflow: clip;
     text-overflow: clip;
     overflow: visible;
}

将此添加到我的 site.css 中，我发现列名现在按预期换行到下一行.

Adding this to my site.css I find the column names are now wrapping onto the next line as expected.

适用于 Chrome (v41) 和 Firefox (v35).

Works in Chrome (v41) and Firefox (v35).

这篇关于使用 Angular ui-grid 时的列标题换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！