give a relatively simple css:

<div style="width:150px;">

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

+25  A: 

Replace your hyphens with this:


It's called a "soft" hyphen.

Ryan Fox
... and it will not show up in the display unless there is an actual break there. So it is no good if you always want the hyphen displayed.
Chris Marasti-Georg
+5  A: 

Word-wrapping is part of CSS3 (read not yet fully supported) and you can find information on it at Another option is the wbr tag, &shy;, and &#8203; none of which are fully supported either.

John Downey
+3  A: 

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.

Additionally &shy; won't work for your example, as it will either:

  • work when word-breaking but when not word-breaking not display any hyphens, or

  • work when not word-breaking but display two hyphens when word-breaking since it adds a hyphen on a break.

+4  A: 

In this specific instance (where your string is going to contain hyphens) I'd transform the text to this server-side:

<div style="width:150px;">
Peter LaComb Jr.
This shouldn't make a difference, right?Or, unless you put those spans on nowrap.

Depending on what you want to see exactly, you can use a combination of hyphen, "soft hyphen", and/or "zero width space".

On a soft hyphen, your browser can word-break (adding an hyphen). On a zero width space, your browser can word break (without adding anything).

Thus, if your code is something like :


then your browser will show this with no word-break :


and this will every possible word-break :


Just pick up the option you need. In your case, it may be the one between 4s and 5s.