How to break email address text into a table cell by specific charactes like '@' or '.'?

I have a table. One column of this table is a email address. The email is a string without spaces.

When there's no enough space I need to break this text into multiple lines in function of '@' and '.' charactes.

Given the following email strings:

john@email.com
richard.developer@email.com

This is what I expect:

john@email.com
richard
.developer
@email.com

This is what I not expect:

john@email.com
richard.
developer
@email.com

How could I achieve this using CSS and HTML?

Solution

Solved!

Two methods:

Method 1 (Not works in IE)

<td>
      richard<wbr>.<wbr>developer<wbr>@<wbr>gmail<wbr>.<wbr>com
</td>

Thanks to n_ermosh in: Specifying a preferred line break point in HTML text in a responsive design

Method 2

CSS:

.break {
    display: inline-block;
}

HTML:

<td>
   <span class="break">richard</span>
   <span class="break">.</span>
   <span class="break">developer</span>
   <span class="break">@</span>
   <span class="break">developer</span>
   <span class="break">.</span>
   <span class="break">com</span>
</td>

Thanks to jomo in: Specifying a preferred line break point in HTML text in a responsive design