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
widthof 150, and wraps to a new line on the hyphen?
How to break word after special character like Hyphens (-)
user_34
0
Viewed 21600
11 Answers
Replace your hyphens with this:
­
It's called a "soft" hyphen.
div {
width: 150px;
}<div>
12333­2333­233­23339392­332332323
</div>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.
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>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.
Related