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

Question

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?

score 1 · Answer 1 · answered Jan 27 '17 at 17:00

1

Can I suggest you to achieve other effect? Have three dots when text is longer than container?

td span{
  display:block;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

<table>
  <tr>
    <td><span>very.long.email@google.com</span></td>
  </tr>
</table>

answered Jan 27 '17 at 17:00

Kasia

1,665
1
10
16

Thanks for reply. This is not exactly what I need in this case, altough would be useful to me in other situation. Unfortunately its not working. Also Its a situation where the column size is not defined. Only the other two columns have specific size. – Natanael Jan 27 '17 at 17:09

score 0 · Accepted Answer · edited May 23 '17 at 12:01

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

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

2 Answers2