The Dutch just tend to use compound words – which are words such as grandmother, footprints, weatherman etc – a lot. Labels can become longer than the associated content in the table cells, which causes the table not to be that responsive anymore on smaller screens because the browser doesn’t know how to break long words anywhere.

Let’s adjust to a smaller screen size:

The browser naturally wraps the English words at the space between the words, so the English First Name and Last Name headers wrap perfectly onto multiple lines. Although the content of the table still fits the screen, the Dutch compound headers do not wrap and horizontal scroll bar appears earlier than needed 🙂

Now this is where <wbr> comes in – you can add these in the compound words where you naturally would want to break it up if space becomes sparse.

Follow me on Twitter

Ted Vinke

I'm a software developer and Java enthusiast. I like clean and modular code, enjoy Agile projects and have a passion for trying our new things. I try to learn and teach every day, and occasionally I'm even able to blog about it :-) I currently work for First8, a Java software development company based in the Netherlands.