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

###

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;
}

Leave a Reply

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