Mob: 07760

ee-web thinks... a bit

Go on, make my day ... leave a comment

Long bits of text – how to “Soft break” them

February 4th, 2014 by Edward

The more that responsive websites take off, and just about every job I do now is responsive, the more I came up against the same, silly little problem.

Namely – how do you avoid long email addresses sticking out of their containers?

Like this – you can see how the long string at the bottom has pushed the table outside of its container.

In the pre-responsive days you used to be able to get around this by careful use of a
tag or font-size. But as virtaully all my work is responsive now the need to sort this problem has become more pressing.

There are several complex ways of doing the job, with js and/or regular expressions for example. One way that is talked about is simply to insert the tab <wbr> which stands for “word break opportunity” and therefore lets the browser insert a break, if its needed. So you’d write something like hellofromavery<wbr>veryverylongstring

However, this doesn’t seem to work across the browsers, or at least not for me. Apparently the tab has been adopted by hhtml5, but IE hasn’t got there yet…

So then I tried inserting &#8203; into the string thus:


This was much more successful and seemed to work across the board – and best of all, when I stuck it into the middle of an email address, so it was on two lines, and clicked it the email still worked. FAB

So job done, at least in this case!


Edward owns and runs ee-web design and has been building websites for over 12 years. He is passionate about... most things really

Was this post helpful or interesting? Spread the news.

Leave a comment