css – HTML opposite of non-breaking space-ThrowExceptions

Exception or error:

In my HTML I have a very long word and I’m trying to force a specific break point only when there isn’t enough room. What I need is a sort of conditional-breaking placeholder. How can I achieve this sort of thing?

How to solve:

Maybe the Unicode zero-width space would help: http://www.fileformat.info/info/unicode/char/200b/index.htm

The HTML entity is e.g.
over​flow will break the word between “over” and “flow” only when the full word doesn’t fit.


The tag <wbr> (for Word BReak) will do what you want.


I’ll post another alternative, as that’s what I actually was looking for the first time I found this question.

You should use a Soft hyphen instead of Zero-width space.

From Soft hyphen:

soft hyphen or syllable hyphen, abbreviated SHY, is a code point reserved in some coded character sets for the purpose of
breaking words across lines by inserting visible hyphens.

Also, to compare it with “Zero-width space”, from Soft hyphen:

It serves as an invisible marker used to specify a place in text where
a hyphenated break is allowed without forcing a line break in an
inconvenient place
if the text is re-flowed. It becomes visible only
after word wrapping at the end of a line. The soft hyphen’s Unicode
semantics and HTML implementation are in many ways similar to
Unicode’s zero-width space, with the exception that the soft hyphen
will preserve the kerning of the characters on either side when not
. The zero-width space, on the other hand, will not, as it is
considered a visible character even if not rendered, thus having its
own kerning metrics.

You can also check out the wikipedia article with an example text that changes when the window resizes.


The Microsoft CSS rule “word-wrap:word-break” should do what you want and is supported by most older browsers



There is also now a WC3 version – “overflow-wrap:break-word;” and as you can read in the spec “For legacy reasons, UAs must treat ‘word-wrap’ as an alternate name for the ‘overflow-wrap’ property, as if it were a shorthand of ‘overflow-wrap’.” – so you may want to test wether your browser set is actually implementing this.



You could always play it safe and use both

p.breaklongwords {

Leave a Reply

Your email address will not be published. Required fields are marked *