Question

I have seen and gone through too many pages explaining the same problem and having various successes. What I am trying to do is come up with a method that I can break up large words so that they don’t break table/divs/etc by stretching the contents beyond the specified width. I need this to be done for a percentage width element. I feel like I have tried everything, but there must be a solution, even if it is a hack. The best solution that I have found so far is to use hyphenator js. It works beautifully for most long words EXCEPT it only seems to work on real words that can be found in a dictionary file. For example, this is broken up nicely in all my examples:

ThisisalongstringoftextandifIwasusinghyphenatorjsonthisthenitwouldbreakupnicelywithhyphensandeverythingwouldbegood

Things like these do not get broken and instead it breaks my site:

abababababababababababababababababababababababababababababababababababababababababababababababababababababababababababababab

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Most sites that I want to use this on allow user created text to appear on the site, and things like the long string of equal signs and hyphen characters are common. I also notice that stackoverflow combats this problem by using the word-wrap: break-word; css (at least in firefox). I have experimented with this and found that it works great, but only works when using pre-defined pixel widths and I need a solution that works with percentage widths. I have also used word-wrap: break-all which works but it looks ugly because it cuts small words off in the middle when it should wrap the word instead.

If possible I would like to continue using hyphenator as it works great most of the time. Maybe I have been looking at this too long, but is there some sort of options in hyphenator that I can set to make it break up non-words like those above that are too big? Maybe someone has had some success with adjusting hyphenators regex to make this happen?

Answer 1

Setting word-wrap: break works (in the technical sense) for percentage widths, too, it seems to fail for tables with percentage widths for cells/columns, even when table-layout has been set to fixed. To work around this, it seems necessary to add line breaking hints into the content.

The old line breaking hint is <wbr>, but some browsers now have issues with it. The new line breaking hint is the ZERO WIDTH SPACE character, which can be written as ​ or as such (when using UTF-8); it works well in modern browsers but causes nasty effects on old versions of IE. I tend to vote for the latter these days, but on my page on line breaking issues, I explain that there is a “bulletproof” but awkward method: use <wbr><a class=wbr></a> with the CSS rule .wbr:after { content: "\00200B"; }. When you generate a page programmatically, such clumsy markup might be feasible.

You should insert such hints only when needed. They should not be used for words in natural languages. As a simple approach, when you process user input for rendering on your page, you could split it to “words” in the technical sense (maximal non-whitespace strings) and then, for every “word” longer than N characters, insert a line breaking hint after any K characters. The parameters N and K would need to be selected according to your layout. The drawbacks: This would cause “emergency breaks” as if a string contained a space but doesn’t, and this could arbitrarily break long natural-language words, too.

Perhaps you could do things client-side, first running Hyphenator.js, then processing the text content so that you split the text content into fragments at any whitespace and at any soft hyphen (\00AD; you need to make sure that you do this only after Hyphenator.js has completed its work). Then you can run the algorithm above on the fragments, i.e. add line breaking hints to long fragments.