Text wrapping inside a table

Sometimes I have a long continuing string inside a table that messes up my table width. For example,

    SDFSDFDGFHDGREFGFGSDFGFGHGDSFGHJTYRGHTYYEGHJTRTWEGRTYEGFHERGHRETERHRTTWERHGEWGERGW

That will give you a very wide column… Just how to squeeze the column to the width we specify?

“Easy,” you might say, “just set the td width!”

    SDFSDFDGFHDGREFGFGSDFGFGHGDSFGHJTYRGHTYYEGHJTRTWEGRTYEGFHERGHRETERHRTTWERHGEWGERGW

Nope. It turns out the same, one long continuous string.

The root problem here is that, the table width is determined by the content, but not the width we specify!

There is this css attribute for the table called table-layout, it disables the usual auto-layout and follows the widths specified. Thus our table will not be shaped by the table content.

    SDFSDFDGFHDGREFGFGSDFGFGHGDSFGHJTYRGHTYYEGHJTRTWEGRTYEGFHERGHRETERHRTTWERHGEWGERGW

OK… So our column now has the specified width, but now the long string goes out of the table column. The content spills over. Even though this is the default behavior in html, it doesn’t look right.

Luckily there is this css attribute called word-wrap. Its function is to break up long continuous words.

    SDFSDFDGFHDGREFGFGSDFGFGHGDSFGHJTYRGHTYYEGHJTRTWEGRTYEGFHERGHRETERHRTTWERHGEWGERGW

So there you have it, table-layout: fixed and word-wrap: break-word will fix the issue.