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

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 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 3

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.

Answer 4

You can use 0 width space after hyphen character:

div {
  width: 150px;
}

<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>

if You want line break before hyphen use ​- instead.

Answer 5

As part of CSS3, it is not yet fully supported, but you can find information on word-wrapping here. Another option is the wbr tag, ­, and ​ none of which are fully supported either.

Answer 6

The non-breaking hyphen works well.

HTML Entity (decimal)

‑