Is there a way to get column headers to wordwrap in SharePoint lists?

Question

My column header needs to be quite long, but the content of the column is only a few pixels wide, so loads of white space and horizontal scrolling required to see the rest of the content.

Any ideas?

Answer 1

You can use SharePoint Designer to edit the AllItems.aspx view on this list. Insert this style inside the content place holder:

<style type= "text/css"> 
  .ms-vh2 {white-space: normal} 
</style>

This will override the style for the column headers which is set to white-space: nowrap

Answer 2

There is also a way to wrap the columns individually using JavaScript by removing the nowrap attribute from the column header.

See Wrap ListViewWebPart Column Headers for more info (shameless link to my blog).

Answer 3

The bast/easy way -> Add JSLink to each view where you want add/remove "white-space".

(function() {
var addClassToField = {};
addClassToField.Templates = {};
// overrideNameField.OnPreRender = RenameColumn;
addClassToField.OnPostRender = AddClass;
addClassToField.Templates.Fields = {
    "Category": {
        "View": FieldToAddClass
    }
}
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(addClassToField)})() 



function FieldToAddClass(ctx) {
      return "<div class='to-whiteSpace'>" + ctx.CurrentItem["Category"] + "
   </div>";
   }

function AddClass() {
    //white-space: nowrap;
    var headerAddClass = document.querySelector("[name=Category]").parentNode;
    if (headerAddClass.style.whiteSpace != "nowrap") {
        headerAddClass.style.whiteSpace = "nowrap";
    }
    var elementsAddClass = document.getElementsByClassName("to-whiteSpace");
    var elementsAddClassQuant = elementsAddClass.length;
    for (var el = 0; el < elementsAddClassQuant; el++) {
        elementsAddClass[el].parentNode.style.whiteSpace = "nowrap";
    }
}

Answer 4

easier way:

(function () {
var overrideCtx = {};
overrideCtx.Templates = {};

overrideCtx.OnPostRender = [HeaderWrap];

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();


function HeaderWrap(inCtx) {
     
   var headers = document.getElementsByTagName("th");
   for (var h = 0; h < headers.length; ++h){
      headers[h].style.whiteSpace = "normal";
   } //for
} //function