采用了棱角分明的UI网格时列标题包装 [英] Column header wrapping when using Angular ui-grid

问题描述

我从升级我AngularJS SPA应用纳克电网V2.0.7 到 UI电网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的网格细胞内容物 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).

这篇关于采用了棱角分明的UI网格时列标题包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！