How to wrap long column headers (labels) in a list view

This article is meant to provide a way in which to overcome long column labels in lists when wrapping of the field label would be preferred.

NOTE: THIS IS A COMPLETELY UNSUPPORTED EXAMPLE SCRIPT AND IS PROVIDED AS IS.  PLEASE DO NOT CONTACT CUSTOMER SUPPORT FOR ASSISTANCE WITH THIS ARTICLE OR EXAMPLE. 

Starting point:  Open_at field on the incident table has a very long label in the dictionary, as shown below:

Results after using this unsupported UI Script (detailed within this article)

All current releases

Very long field labels in the dictionary, which can not be easily made to wrap within the list.

There is no current OOB mechanism to allow for the wrapping of long column labels. 

The below unsupported UI Script should work to resolve the display formatting limitation of the field label when viewed in the list.  

NOTE: THIS EXAMPLE UI SCRIPT IS NOT SUITABLE FOR RELATED LISTS AS SHOWN BELOW

~~~snip~~~
(function(){
// Just run on incident list pages
if ( !~location.href.indexOf( 'incident_list.do' ))
return;

var styles = [
'#hdr_incident > th[glide_field="incident.opened_at"] { max-width:75px; }',
'#hdr_incident > th[glide_field="incident.opened_at"] > span:nth-child(1) { white-space:pre-line !important; }',
'#hdr_incident > th[glide_field="incident.opened_at"] > span:nth-child(1) > a[data-type="list2_hdrcell"] { white-space:inherit; }'
].join(' '),

link = document.createElement( 'link' );
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = URL.createObjectURL( new Blob([ styles ], { type: 'text/css' }) );

(document.head || document.documentElement).appendChild( link );
})();

~~~/snip~~~


NOTE: Modify this as the example is column specific (here, the dictionary entry for the opened_at field label was very long)

A screenshot of the example script:

While mentioned several times above, it's worth saying again:

This example UI script is not supported or endorsed by ServiceNow.  Use this example script at your own risk.