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?

It's possible with something like php. but I don't think that's something OP has. — Class, Apr 16 '13 at 07:34
As I read in [this answer](http://stackoverflow.com/questions/1520429/css-3-content-selector), seems that you cannot target content text... — Arkana, Apr 16 '13 at 07:39
@11684 If there are no other alternatives, I will go with your solution. — Simon, Apr 16 '13 at 07:46

score 11 · Accepted Answer · answered Apr 16 '13 at 07:29

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>');

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

score 1 · Answer 2 · edited May 23 '17 at 11:54

1

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.

edited May 23 '17 at 11:54

Community

answered Oct 26 '16 at 14:54

Milhouse

score 0 · Answer 3 · answered Sep 28 '17 at 15:17

0

<wbr> didn't work for me, but a zero-width space did. You can use:

var longWord = "a.long.word.separated.by.dots".replace(/\./g, '.&#x200b;');

answered Sep 28 '17 at 15:17

Paul

A downside of using a zero-width space is that it will be copied to the clipboard if the user copies text from the Web page. This could cause a lot of confusion depending on what application the text ends up in. – kindall Oct 04 '17 at 22:23
@kindall you are right. Fortunately, that's not an issue in my case - the text is not selectable. – Paul Oct 04 '17 at 22:38

Simone · Answer 4 · 2013-04-16T07:57:49.393

-3

You can use this CSS3 property:

table tr td {
    word-wrap: break-word;
}

edited Apr 16 '13 at 07:57

answered Apr 16 '13 at 07:29

Simone

1

It wraps at any character, not only at punctuation. – JJJ Apr 16 '13 at 07:30

4 Answers4