This question was asked (Multi line box Infopath not Word Wrapping in Chrome.) for SP 2010, but there are no answers.

I'd like the text field to wrap in all browsers as the person types

I build an edit form in InfoPath 2013 to add text to a SharePoint 2013 list. In Internet Explorer, the textbox is wrapping as you type like this:

enter image description here

but in Chrome and Firefox, the text just continues infinitely on one line like this:

enter image description here

I've tried to fiddle with the css using word-wrap: break-word; or word-break: break-word; with no success.

Has anyone figured this out? Or is it a browser compatibility issue and I just have to warn my non Internet Explorer users that they will have to break their own lines when typing?

4 Answers 4

  1. Upload a new css file to the “Style Library”. File should contain the following:
textarea { white-space: pre-wrap !important; word-wrap: break-word !important; }
  1. Go to Site Settings – Look and Feel – Master Page
  2. Set the Alternate CSS URL to point to the new CSS file that was added to the “Style Library” Alternate CSS URL in Master Page

  3. Make sure to check “Reset all subsites…..”

  4. Save and issue should be resolved for both Chrome and Firefox

You need to set "white-space: pre-wrap". Unfortunately, when I set this property on InfoPath form (view1.xsl), for some reason, this setting is not carried over in the form published to SharePoint. As a workaround, I added CSS on new/edit/display page targeting specific "texture" column with above property.

<style>#ctl00_SPWebPartManager1_g_8a8da3af_5949_4024_99d5_0a3b03b43a87_FormControl0_V1_I1_T17{white-space: pre-wrap !important;}</style>
  • I haven't gotten around to trying this, but if enough people are validating it I'll mark it as the answer May 17, 2016 at 15:58

Try wrap='on'

<textarea wrap='on'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus eros nec eros suscipit aliquet. Duis posuere nisi at eros mollis rutrum. Suspendisse at eros sem. Donec ac lorem ac quam lacinia hendrerit facilisis vel diam. Fusce eget est interdum massa facilisis imperdiet ac sed sapien. Ut porta ornare erat quis lacinia. Aenean sit amet turpis ut libero venenatis facilisis. Vivamus congue interdum enim. Pellentesque non diam tortor. Aliquam at lobortis dui. Donec diam ipsum, hendrerit ac sagittis in, pharetra non eros.  </textarea>
  • I believe turning wrap='off' does the opposite of what I'm asking. But as an aside, how would you add that attribute to the text area? SharePoint generates the HTML itself. Mar 31, 2016 at 14:07
  • Woops, sorry just change it to on. You could potentially use css (I think) and apply it to textarea type/or class or use JS and apply it to given elements See these links for css ways (not the same attributes but similar): w3schools.com/cssref/pr_text_white-space.asp and w3schools.com/cssref/css3_pr_word-wrap.asp
    – Roland
    Mar 31, 2016 at 22:50

InfoPath word-wrap fixer Chrome extension injects textarea { white-space: pre-wrap !important; word-wrap: break-word !important; } directly into the SharePoint text areas.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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