Wrap long words within dynamic tables

Very long words can break page layout (overflow borders or extremely expand table cells, occasionally showing undesired horizontal scrollbar).

The problem is easy to resolve for divs and fixed tables(table-layout:fixed) - just apply CSS3 property word-wrap:break-word (same as the newer overflow-wrap:break-word, the latter not yet being supported by most browsers).

Unfortunately this is not enough with dynamic tables.

Following similar word handling options are not working within dynamic tables:

- CSS3 word-break:break-all is not acceptable - breaks all words, although very robust.
- CSS3 text-wrap:unrestricted has similar effect as word-break:break-all and besides has poor browser support.
- CSS3 hyphens:auto works nice but only if the browser has the relevant dictionary in the corresponding language.

The robust resolution for dynamic tables is:

• CSS3 word-wrap:break-words (This will do half of the work for dynamic tables).
• For dynamic tables we need to help the browser find break points. One possible solution is to insert the invisible "Zero-width space" entity (hex 8203), e.g. after every 20 consecutive characters without hyphens or hyphen-like characters. (Note, the long words will be wrapped at those points only when needed, i.e. no enough space.)

Here is some code to do this kind of hidden hyphenating:

protected string BreakLongWords(string s) {
    if (s == null)
        return null;
    using (var rdr = new System.IO.StringReader(s)) {
        var sb = new System.Text.StringBuilder();
        int i;
        int cnt = 0;
        while ((i = rdr.Read()) > -1) {
            var c = (char)i;
            sb.Append(c);
            cnt = (c.Equals(' ') || c.Equals('\n') || c.Equals('-')) ? 0 : cnt + 1;
            if (cnt > 20) {
                sb.Append("​​​​");
                cnt = 0;
            }
        }
        return sb.ToString();
    }
}

SUMMARY:

1. Set CSS3 word-wrap:break-word.
2. Pass text through BreakLongWords() function.