HTML change line break trigger?

Question

Is there any way in CSS/HTML to change what characters cause linebreaks in text to be allowed? For example if I have table data containing the text \"fooooooo/barrrrrrrrr\"

Answer 1

It is not possible in CSS/HTML to change the set of characters that cause, allow, or prevent linebreaks in text. However, it is possible to affect such things per each occurrence of a character. That is, you cannot say in general “linebreak after ‘/’ is allowed”, but you can inject some markup or content after a particular occurrence of “/” to allow a line break there.

Note that browsers have different line breaking behavior. For example, Opera treats the slash “/” as allowing a line break after it. The behavior may also depend on the context. See my page on line breaking in browsers.

Thinks used to be simple, to anyone who knew the practical method and wasn’t too worried about the reluctance of standardizers to accept it: the tag. It is still the simple practical way, e.g. fooooooo/barrrrrrrrr, but it isn’t the most cross-browser way any more. The newer way, the zero-width space U+200B, which can be written as ​ in HTML, works well on modern browsers, but on some old versions of IE, it creates a mess (a small rectangle is displayed where this control character appears).

If you are willing to use somewhat verbose code, you can combine the two ways. You would use both and an inline element with empty content but with zero-width space as generated content. This avoids the problem on IE 6, as it does not support generated content in CSS (but recognizes the markup). Example:

fooooooo/barrrrrrrrr

with CSS code

.wbr:after { content: "\00200B"; }

Test and demo: jsfiddle.