In HTML, how to word-break on a dash?

Question

give a relatively simple css:

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

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?

Answer 1

Replace your hyphens with this:

­

It's called a "soft" hyphen.

Answer 2

Word-wrapping is part of CSS3 (read not yet fully supported) and you can find information on it at http://www.css3.info/preview/word-wrap/. Another option is the wbr tag, ­, and ​ none of which are fully supported either.

Answer 3

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 ­ 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.

Answer 4

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;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>

Answer 5

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 :

111111­222222­-333333​444444-​555555

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

1111112222222-33333334444444-5555555

and this will every possible word-break :

111111-
222222-
-333333
444444-
555555

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