Break word with dash css

When i have long word which is longer than my container i am using «word-break: break-all;». I was wondering is it possible to put dash(-) at the break point of the word?

This is the css that i am using for the text:

p{    
-ms-word-break: break-all;
 word-break: break-all;

-webkit-hyphens: auto;
-moz-hyphens: auto;
    hyphens: auto;
}

http://fiddle.jshell.net/L18c813r/1/

asked May 22, 2015 at 10:43

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 simply wraps to a newline on the hyphen?

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>

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>

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.

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>

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.

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.

The non-breaking hyphen works well.

HTML Entity (decimal)

‑

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.

Hope this may help

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

You can use 0 width space after hyphen character:

div {
  width: 150px;
}

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

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

In the following code, CSS property word-break can be changed to the following values

• normal
• break-all