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

Answer 1

Instead of - you can use ‐ or \u2010.

Also, make sure the hyphens css property was not set to none (The default value is manual).

<wbr> is not supported by Internet Explorer.

Answer 2

You can also use :

word-break:break-all;

ex.

<div style='width:10px'>ababababababbabaabababababababbabababa</div>

output:

abababababa
ababababbba
abbabbababa
ababb

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.

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

Answer 5

Hope this may help

use <br>(break) tag where you want to break the line.