How to break word after special character like Hyphens (-)
HtmlCssTextHtml Problem Overview
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 wraps to a new line on the hyphen?
Html Solutions
Solution 1 - Html
Replace your hyphens with this:
­
It's called a "soft" hyphen.
div {
width: 150px;
}
<div>
12333­2333­233­23339392­332332323
</div>
Solution 2 - Html
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>
Solution 3 - Html
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.
Solution 4 - Html
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.
Solution 5 - Html
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>
Solution 6 - Html
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.
Solution 7 - Html
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.
Solution 8 - Html
The non-breaking hyphen works well.
HTML Entity (decimal)
‑
Solution 9 - Html
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.
Solution 10 - Html
Hope this may help
use <br>(break) tag where you want to break the line.
Solution 11 - Html
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.