I am using SharePoint Online. I have a list created by importing an Excel spreadsheet. Some of the column names are long which is creating a lot of horizontal scrolling. I want to word-wrap the column names to save space. I found an article saying you could add the CSS below to a CEWP in the list, but nothing happens when i try that.

<style type= "text/css"> .ms-formlabel { width: 400px; } .ms-formlabel nobr { white-space: normal; } </style>

Does anyone know why that would not work or what I may be doing wrong? I tried adding it into the allitems.aspx code in SP Designer as well, but i was not sure exactly where to insert it, and the one place i tried it gave me an error.

Thanks in advance


If it is column names in the list view that you want to break onto multiple lines, then the following should work for you as it works for me:

.ms-vh-div {
    white-space: normal;
    width: 50px;

Note that this works only for the classic experience on SharePoint Online.

| improve this answer | |
  • That actually removed the whole view of list , had to delete the script – OM-ॐ Aug 24 '17 at 6:57
  • @ViperOrton What script are you talking about? the above is not a script; CSS is not a script. The above does not remove anything, it only changes the styling of the list view column names. Maybe you did not apply the CSS correctly or had some other CSS or JavaScript that broke your list view. – Mihail-Florin Popa Aug 24 '17 at 21:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.