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

Just as an alternative, I've used the following in the past:

<span style="display:block;float:left;" />

or better would be to have this defined in your css:

.shy { display:block; float:left; }

and then use:

<span class="shy" />

So where ever you place the above in a string of characters, it will act as a break if need be.

stringthathasnospaceswhatsoever<span class="shy" />willbreakjustjustatthespan.

Answer 2

No, but there are Unicode characters (most notably, U+200B ZERO WIDTH SPACE) which will allow a line break at a specified point while not inserting any visible characters or space.

Answer 3

There is no way to tell the browser to allow wrapping on specific characters.

The CSS3 word-wrap: break-word; property will get you part of the way there by allowing the line to break on any character. This will happen if the text is longer than the computed maximum width of its containing element.

If you are dynamically generating the HTML output server-side, you could do a regex search and replace to insert a space before the character you'd like to (optionally) wrap on but, without knowing the context, it's hard to be more specific about that.

Answer 4

You could use css word-wrap property so your long word gets broken according to its container width:

word-wrap: break-word;

Answer 5

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 <wbr> tag. It is still the simple practical way, e.g. fooooooo/<wbr>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 <wbr> 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 <wbr> markup). Example:

fooooooo/<wbr><a class=wbr></a>barrrrrrrrr

with CSS code

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

Test and demo: jsfiddle.