In HTML, how can I wrap a word at . (dot), just like it wraps at - (dash)?

Question

I have a long word in a table cell that messes up the table layout:

a.long.word.separated.by.dots

I would like the word to wrap like this word:

a-long-word-separated-by-dashes

How can I get this done, with CSS, without changing the HTML?

Answer 1

If using JS is okay, you can do this. If it is not, then this answer may still be useful for future readers.

var longWord = "a.long.word.separated.by.dots".replace(/\./g, '.<wbr>');

Reference on the wbr tag: http://www.w3.org/wiki/HTML/Elements/wbr

Alternatively, you could put a <wbr> after each period manually.

Answer 2

You can do it in PHP, sorry for waking a dead question, but if you're populating an HTML table using a PHP loop you just need something like:

preg_replace('/\./', '.<wbr>', $string);

This takes 11684's answer and puts it into the requested context.