Simon Simon - 1 month ago 13
CSS Question

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

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

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.