<p>Given a relatively simple CSS:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
  width: 150px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  12333-2333-233-23339392-332332323
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<blockquote>
  <p>How do I make it so that the string stays constrained to the <code>width</code>
  of <strong>150</strong>, and wraps to a new line on the <em>hyphen</em>?</p>
</blockquote>

[{'answer_id': 911, 'author': 'Ryan Fox', 'author_id': 55, 'author_profile': 'https://Stackoverflow.com/users/55', 'pm_score': 7, 'selected': True, 'text': '<p>Replace your hyphens with this:</p>\n\n<pre><code>&amp;shy;\n</code></pre>\n\n<p>It\'s called a "soft" hyphen.</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>div {\r\n  width: 150px;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;\r\n  12333&amp;shy;2333&amp;shy;233&amp;shy;23339392&amp;shy;332332323\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 912, 'author': 'John Downey', 'author_id': 200, 'author_profile': 'https://Stackoverflow.com/users/200', 'pm_score': 4, 'selected': False, 'text': '<p>As part of CSS3, it is not yet fully supported, <a href="http://www.css3.info/preview/word-wrap/" rel="noreferrer">but you can find information on word-wrapping here</a>. Another option is the <a href="http://www.quirksmode.org/oddsandends/wbr.html" rel="noreferrer">wbr tag, &amp;shy;, and &amp;#8203;</a> none of which are fully supported either.</p>\n'}, {'answer_id': 67878, 'author': 'Dave Rutledge', 'author_id': 2486915, 'author_profile': 'https://Stackoverflow.com/users/2486915', 'pm_score': 3, 'selected': False, 'text': "<p>Your example works as expected in Google Chrome, Safari (Windows), and IE8. The text breaks out of the 150px box in Firefox 3 and Opera 9.5.</p>\n\n<p>Additionally <code>&amp;shy;</code> won't work for your example, as it will either:</p>\n\n<ul>\n<li><p>work when word-breaking but when not word-breaking not display any hyphens, or </p></li>\n<li><p>work when not word-breaking but display two hyphens when word-breaking\nsince it adds a hyphen on a break.</p></li>\n</ul>\n"}, {'answer_id': 343686, 'author': 'Peter T. LaComb Jr.', 'author_id': 8513, 'author_profile': 'https://Stackoverflow.com/users/8513', 'pm_score': 3, 'selected': False, 'text': '<p>In this specific instance (where your string is going to contain hyphens) I\'d transform the text to this server-side:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width:150px;"&gt;\r\n  &lt;span&gt;12333-&lt;/span&gt;&lt;span&gt;2333-&lt;/span&gt;&lt;span&gt;233-&lt;/span&gt;&lt;span&gt;23339392-&lt;/span&gt;&lt;span&gt;332332323&lt;/span&gt;\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 3725181, 'author': 'Orion', 'author_id': 449300, 'author_profile': 'https://Stackoverflow.com/users/449300', 'pm_score': 3, 'selected': False, 'text': '<p>Depending on what you want to see exactly, you can use a combination of <code>hyphen</code>, <code>soft hyphen</code>, and/or <code>zero width space</code>.</p>\n\n<p>On a soft hyphen, your browser can word-break (adding an hyphen).\nOn a zero width space, your browser can word break (without adding anything).</p>\n\n<p>Thus, if your code is something like\xa0: </p>\n\n<p><code>111111&amp;shy;222222&amp;shy;-333333&amp;#8203;444444-&amp;#8203;555555</code></p>\n\n<p>then your browser will show this with no word-break\xa0:</p>\n\n<blockquote>\n  <p>1111112222222-33333334444444-5555555</p>\n</blockquote>\n\n<p>and this will every possible word-break\xa0:</p>\n\n<blockquote>\n  <p>111111-<br/>\n  222222-<br/>\n  -333333<br/>\n  444444-<br/>\n  555555</p>\n</blockquote>\n\n<p>Just pick up the option you need. In your case, it may be the one between 4s and 5s.</p>\n'}, {'answer_id': 9060345, 'author': 'aeskr', 'author_id': 1125471, 'author_profile': 'https://Stackoverflow.com/users/1125471', 'pm_score': 5, 'selected': False, 'text': '<p>In all modern browsers<sup>*</sup> (and in some <a href="http://www.quirksmode.org/oddsandends/wbr.html" rel="noreferrer">older browsers</a>, too), the <a href="https://developer.mozilla.org/en/HTML/Element/wbr" rel="noreferrer"><code>&lt;wbr&gt;</code> element</a> is the perfect tool for providing the opportunity to break long words at specific points.</p>\n\n<p>To quote from that link:</p>\n\n<blockquote>\n  <p>The Word Break Opportunity (<code>&lt;wbr&gt;</code>) HTML element represents a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.</p>\n</blockquote>\n\n<p>Here\'s how it could be used to in the OP\'s example (or see it in action at <a href="http://jsfiddle.net/AdleyEskridge/qrgaK/" rel="noreferrer">JSFiddle</a>):</p>\n\n<pre><code>&lt;div style="width: 150px;"&gt;\n  12333-&lt;wbr&gt;2333-&lt;wbr&gt;233-&lt;wbr&gt;23339392-&lt;wbr&gt;332332323\n&lt;/div&gt;\n</code></pre>\n\n<p><sup>*</sup>I\'ve tested it in IE9, IE10, and the latest versions of Chrome, Firefox, and Opera, and Safari.</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>div {\r\n  width: 150px;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;\r\n  12333-&lt;wbr&gt;2333-&lt;wbr&gt;233-&lt;wbr&gt;23339392-&lt;wbr&gt;332332323\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 22570418, 'author': 'ImaJedi4ever', 'author_id': 3329778, 'author_profile': 'https://Stackoverflow.com/users/3329778', 'pm_score': 0, 'selected': False, 'text': '<p>The non-breaking hyphen works well.</p>\n\n<p><strong>HTML Entity (decimal)</strong>   </p>\n\n<pre><code>&amp;#8209;\n</code></pre>\n'}, {'answer_id': 30229247, 'author': 'TObject', 'author_id': 4736743, 'author_profile': 'https://Stackoverflow.com/users/4736743', 'pm_score': 0, 'selected': False, 'text': '<p>Instead of <code>-</code> you can use <code>&amp;hyphen;</code> or <code>\\u2010</code>.</p>\n\n<p>Also, make sure the <strong>hyphens</strong> css property was <strong>not</strong> set to <em>none</em> (The default value is <em>manual</em>).</p>\n\n<p><code>&lt;wbr&gt;</code> is not supported by <em>Internet Explorer</em>.</p>\n'}, {'answer_id': 32249676, 'author': 'Ajay Gupta', 'author_id': 2663073, 'author_profile': 'https://Stackoverflow.com/users/2663073', 'pm_score': 2, 'selected': False, 'text': "<p>You can also use :</p>\n\n<pre><code>word-break:break-all;\n</code></pre>\n\n<p>ex.</p>\n\n<pre><code>&lt;div style='width:10px'&gt;ababababababbabaabababababababbabababa&lt;/div&gt;\n</code></pre>\n\n<p>output:</p>\n\n<pre><code>abababababa\nababababbba\nabbabbababa\nababb\n</code></pre>\n\n<p>word-break is break all the word or line even if no-space in sentence that not feets in provided width or height. nut for that you must be provide a width or height.</p>\n"}, {'answer_id': 45979734, 'author': 'Mohammed Wahed Khan', 'author_id': 8040185, 'author_profile': 'https://Stackoverflow.com/users/8040185', 'pm_score': 0, 'selected': False, 'text': '<p>Hope this may help</p>\n\n<p>use <code>&lt;br&gt;</code>(break) tag where you want to break the line.</p>\n'}, {'answer_id': 52311670, 'author': 'jcubic', 'author_id': 387194, 'author_profile': 'https://Stackoverflow.com/users/387194', 'pm_score': 0, 'selected': False, 'text': '<p>You can use 0 width space after hyphen character:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>div {\r\n  width: 150px;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;\r\n  12333-&amp;#8203;2333-&amp;#8203;233-&amp;#8203;23339392-&amp;#8203;332332323\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>if You want line break before hyphen use <code>&amp;#8203;-</code> instead.</p>\n'}]
['https://Stackoverflow.com/questions/904', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/34/']