Textarea wrapping in Internet Explorer but not in Chrome or Firefox

Question

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:

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

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?

Answer 1

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; }

2. Go to Site Settings – Look and Feel – Master Page

3. Set the Alternate CSS URL to point to the new CSS file that was added to the “Style Library”

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

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

Answer 2

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>

Answer 3

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>

Answer 4

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