How to break word after special character like Hyphens (-)

Question

Given a relatively simple CSS:

div {    width: 150px;  }

<div>    12333-2333-233-23339392-332332323  </div>

How do I make it so that the string stays constrained to the width of 150, and wraps to a new line on the hyphen?

Answer 1

Replace your hyphens with this:

­ 

It's called a "soft" hyphen.

div {    width: 150px;  }

<div>    12333&shy;2333&shy;233&shy;23339392&shy;332332323  </div>

Answer 2

In all modern browsers^* (and in some older browsers, too), the <wbr> element is the perfect tool for providing the opportunity to break long words at specific points.

To quote from that link:

The Word Break Opportunity (<wbr>) 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.

Here's how it could be used to in the OP's example (or see it in action at JSFiddle):

<div style="width: 150px;">   12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323 </div> 

^*I've tested it in IE9, IE10, and the latest versions of Chrome, Firefox, and Opera, and Safari.

div {    width: 150px;  }

<div>    12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323  </div>