HTML opposite of non-breaking space

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

the opposite of br :

<nobr>   </nobr>

regards

Answer 5

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

https://developer.mozilla.org/en-US/docs/CSS/word-wrap

http://msdn.microsoft.com/en-us/library/ie/ms531186(v=vs.85).aspx

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.

http://www.w3.org/TR/css3-text/#overflow-wrap

http://caniuse.com/#search=overflow-wrap

You could always play it safe and use both

p.breaklongwords {
    word-wrap:word-break;
    overflow-wrap:break-word;
}