Column header wrapping when using Angular ui-grid

Question

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 s

Answer 1

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;
}

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

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