<p>Html Textarea elements only wrap when they reach a space or tab character. This is fine, until the user types a looooooooooooooooooooooong enough word. I'm looking for a way to strictly enforce line breaks (eg.: even if it results in "loooooooooooo \n ooooooooooong").</p>

<p><img src="https://i.stack.imgur.com/sUmHB.png" alt="alt text"></p>

<p>The best I've found is to add a zero-width unicode space after every letter, but this breaks copy and paste operations. Anyone know of a better way?</p>

<p>Note: I'm referring to the "textarea" element here (i.e.: the one that behaves similarly to a text input) - not just a plain old block of text.</p>

[{'answer_id': 47822, 'author': 'VolkerK', 'author_id': 4833, 'author_profile': 'https://Stackoverflow.com/users/4833', 'pm_score': 2, 'selected': False, 'text': '<p>There\'s the non-standard element wbr that is supported by at least</p>\n\n<p>Firefox, <a href="http://developer.mozilla.org/En/HTML/Element" rel="nofollow noreferrer">http://developer.mozilla.org/En/HTML/Element</a></p>\n\n<p>Internet Explorer, <a href="http://msdn.microsoft.com/en-us/library/ms535917(VS.85).aspx" rel="nofollow noreferrer">http://msdn.microsoft.com/en-us/library/ms535917(VS.85).aspx</a></p>\n\n<p>and Opera.</p>\n'}, {'answer_id': 47866, 'author': 'Sören Kuklau', 'author_id': 1600, 'author_profile': 'https://Stackoverflow.com/users/1600', 'pm_score': 3, 'selected': False, 'text': '<ul>\n<li>quirksmode.org has an <a href="http://www.quirksmode.org/oddsandends/wbr.html" rel="nofollow noreferrer">overview of various methods</a>.</li>\n<li>There\'s a related SO question: <a href="https://stackoverflow.com/questions/904/in-html-how-to-word-break-on-a-dash">"In HTML, how to word-break on a dash?"</a></li>\n<li>In browsers that support it, <a href="http://www.w3.org/TR/css3-text/#word-wrap" rel="nofollow noreferrer"><code>word-wrap: break-word</code></a> might give the desired effect as well.</li>\n</ul>\n'}, {'answer_id': 48170, 'author': 'Marcio Aguiar', 'author_id': 4213, 'author_profile': 'https://Stackoverflow.com/users/4213', 'pm_score': 0, 'selected': False, 'text': '<p>I tested the <strong>&lt;wbr&gt;</strong>, <strong>&amp;#8203;</strong> and <strong>&amp;shy;</strong> techniques. All three worked well in IE 7, Firefox 3 and Chrome. </p>\n\n<p>The only one that did not break the copy/paste was the <strong>&lt;wbr&gt;</strong> tag.</p>\n'}, {'answer_id': 604928, 'author': 'Kim Reece', 'author_id': 1911072, 'author_profile': 'https://Stackoverflow.com/users/1911072', 'pm_score': 5, 'selected': True, 'text': '<p>The CSS settings <code>word-wrap:break-word</code> and <code>text-wrap:unrestricted</code> appear to be CSS 3 features.  Good luck finding a way to do this on current implementations.</p>\n'}, {'answer_id': 995879, 'author': 'Alsciende', 'author_id': 119195, 'author_profile': 'https://Stackoverflow.com/users/119195', 'pm_score': 0, 'selected': False, 'text': '<p>According to my tests, only Firefox has the described behavior among current browsers. So I guess your best bet is to wait for the imminent release of Firefox 3.1 to solve your problem :)</p>\n'}, {'answer_id': 38422582, 'author': 'crisc2000', 'author_id': 4481831, 'author_profile': 'https://Stackoverflow.com/users/4481831', 'pm_score': 2, 'selected': False, 'text': '<p>Breaking long words at textarea width size:</p>\n\n<p><strong>1) for modern browsers:</strong></p>\n\n<pre><code>textarea { word-break: break-all; }\n</code></pre>\n\n<p><strong>2) for IE8 compatibility add:</strong></p>\n\n<pre><code>textarea { -ms-word-break: break-all; }\n</code></pre>\n\n<p><a href="https://msdn.microsoft.com/en-us/library/ms531184%28v=vs.85%29.aspx" rel="nofollow noreferrer">https://msdn.microsoft.com/en-us/library/ms531184%28v=vs.85%29.aspx</a></p>\n\n<p><strong>3) add IE11 compatibility hack:</strong></p>\n\n<p><a href="https://stackoverflow.com/questions/20149715/internet-explorer-11-word-wrap-is-not-working">Internet Explorer 11 word wrap is not working</a></p>\n\n<pre><code>@media all and (-ms-high-contrast:none) {\n*::-ms-backdrop, textarea { white-space: pre; } \n}\n</code></pre>\n\n<hr>\n\n<p>This code it\'s working fine on:</p>\n\n<p>-IE 11, Chrome 51, Firefox 46 (Windows 7);</p>\n\n<p>-IE 8, Chrome 49, Firefox 18 (Windows Xp);</p>\n\n<p>-Edge 12.10240 , Opera 30 (Windows 10);</p>\n'}, {'answer_id': 42537857, 'author': 'SeekLoad', 'author_id': 7371886, 'author_profile': 'https://Stackoverflow.com/users/7371886', 'pm_score': 0, 'selected': False, 'text': '<p>The most elegant way is to use <code>wrap="soft"</code> for wrapping entire words or <code>wrap="hard"</code> for wrapping by character or <code>wrap="off"</code> for not wrapping at all though the last one <code>wrap="off"</code> is often not needed as automatically the browser uses automatically as if it was <code>wrap="off"</code>.<br>\nEXAMPLE:</p>\n\n<pre><code>&lt;textarea name="tbox" cols="24" rows="4" wrap="soft"&gt;&lt;/textarea&gt;\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/47817', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/4939/']