Recently I’ve run into an interesting issue where Internet Explorer won’t break on some lines when there is a string followed by a space followed by a period followed by a string. For example: “I’ve written some text here .So that I can illustrate this issue.” I’ve made a mistake and put the period on the wrong side of the space, I’m not the best typist in the world so this happens to me from time to time.
My issue steams from hit highlighting in search results. Our back-end database automatically adds code similar to this for the search term “foo”:
<span>Found In:</span> ...<span class="hitHighlight">foo</span> ...<span class="hitHighlight">foo</span> ...<span class="hitHighlight">foo</span> ...
Now normally this wouldn’t be an issue and probably would go unnoticed but there are some cases where the search term is rather long. ( I’ve been working on a Finnish site and the term I’m having issues with is “Kappaletavarakuljetukset”. ) When the search term is long we want the text to wrap on to the next line. Which in IE it won’t unless you force it by adding <wbr> or another space after the period.
You might be able to imagine there are some legitimate places you will want to place “text .text”. However as in my case its not really legitimate and due to the Microsoft (!) back-end we are using to produce the code/text its rather difficult to change the generated code.
Update: Since the bug isn’t overly apparent in non-IE browsers… Screenshots:
Update2: It seems that <wbr> doesn’t work in all cases. Sadly in my case in IE8, I had to add an extra space.