Prevent long word to add horizontal scroll to html view

Question

On Windows Mobile, I am displaying my output in HTML. This includes lots of user-generated strings. Occasionally there are situations where a really large string is part of the output that has no whitespaces or punctuation.

Unfortunately the Windows Mobile's HTML view (htmlview.dll, based on Pocket Internet Explorer) does not break these long words down so they fit on screen. Instead a horizontal scrollbar is added and the user has to scroll sideways to see the whole word. This also affects other output which now also is spread along this larger screen width.

Is there any possibility to either make the htmlview behave differently, or to force the word to break? CSS can be used. Regarding the forcing: The &shy; tag is ALWAYS inserting a "-" character and never causes a breaks, the <WBR> tag is not doing anything at all, &8203; is output as &8203:, empty tags like also do nothing. Also it should be noted that this code is running on multiple screen sizes and due to other parts of the HTML output I am not 100% sure how much screen width I have left.

P.S.: My app is compiled using the WM 5.0 SDK and is written in C++/Win32/MFC.

Answer 1

I don't know pretty much anything about Windows Mobile, so I could be way off, but what you could try doing is inserting HTML entities at certain periods throughout long words which act as hyphenation "hints".

Since I assume it's only IE which runs on WinMo, the entity you'd be looking for is called the "shy hyphen": ­ It's basically a character which tells the browser that "this point would be a good place to break the word, only if you need to". If it does need to break the word over two (or more!) lines, then a hyphen is inserted, otherwise it is completely invisible.

I found this info here, which also has more details about how to do this in other browsers.

The way I'd get them into your HTML in the first place would be to search for words which are longer than X characters (say, 30), and then in those words, after every Y characters (say, 20), insert the ­

Answer 2

Besides the shy hypen as mentioned by nickf, you can always use CSS to hide overshooting words by settings the box's style to overflow: hidden. Good news: no scrollbar, ma. Bad news: word is cut. For the shy hypen, I wouldn't go with the entity, though. Instead, use the character directly in your text: its character code is 0xAD (Unicode +00AD). (Entities are generally deprecated by the use of a correct encoding.)