How to get column names to wrap in #SharePoint new item forms (NewForm.aspx)

I was asked the other day if there might be a slick CSS method for getting long column names to wrap in a SharePoint list’s new item form (NewForm.aspx). The long column names were causing a horizontal scroll at times and just plain didn’t look right.










The first thing I did was to examine the code that NewForm.aspx was presenting to the browser. I found the culprit was a <nobr> tag wrapped around the column name.

<nobr> stands for ‘no break’ and overrides the normal HTML line-wrapping. A little research yielded  the following CSS override. Basically redefining the nobr tag to allow the column name to wrap.

nobr {white-space: normal}

Armed with that info, you have a few options. You could add this to your custom style sheet or master page. This would override all instances of the nobr tag so you will have to be sure that is really what you want to do.
Another option would be to deploy the CSS on just the NewForm.aspx page for your list using SharePoint Designer. If you want to be able to make future tweaks (or remove the CSS all together) from the browser, add a web part zone to the form page and deploy the CSS in a content editor web part. This is the method I will describe here.
The high-level overview:

1. Add a web part zone to your new item page
2. Add a content editor web part (CEWP) to the zone
3. Add the following code to the Source Editor of the CEWP
   
   <style type= "text/css">
   nobr {white-space: normal}
   </style>

The details:
Browse to your list and click ‘New’ (Item)
On the File menu, select ‘Edit with Microsoft Office SharePoint Designer’

This will launch SharePoint Designer (SPD). In SPD, add a web part zone to the page. (‘New Web Part Zone’ is on the Web Part task pane)

Click the ‘Click to insert a Web Part’ hyperlink and add the Content Editor Web Part
Save the page (which will customize it from the site def)

Back in your browser, refresh the new item page
Click ‘Site Actions’, ‘Edit Page’

On the CEWP, click the ‘edit’ drop down and select ‘Modify Shared Web Part’
Click the ‘Source Editor’ button and type in the following:

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

 
Click ‘Save’, and ‘OK’ and you should see the long column names wrap immediately

The default width for the Title column is 190px. If you want it a bit wider you could modify the CEWP source code to specify a width, like this:

Which will make that first column 225px instead.

When you have it looking right, edit the page again and edit the CEWP web part again.
Expand the ‘Appearance’ section and give it a meaningful title, like “CEWP-CSS Constrain width on new item form” and set the Chrome Type to ‘None’
You can export the web part to use elsewhere in your site if needed.