Comment faire pour décomposer le texte de l'adresse e-mail dans une cellule de tableau par des caractères spécifiques tels que '@' ou '.'?

Question

J'ai une table. Une colonne de cette table est une adresse e-mail. L'email est une chaîne sans espaces.

Quand il n'y a pas assez d'espace, j'ai besoin de casser ce texte en plusieurs lignes en fonction de '@' et '.' charactes.

Compte tenu des chaînes de courriel suivantes:

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

Voici ce que je pense:

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

C'est ce que je pense pas:

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

Comment pourrais-je parvenir à l'aide CSS et HTML?

Answer 1

Résolu!

Deux méthodes:

Méthode 1 (travaux dans IE)

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

Merci à n_ermosh dans: Specifying a preferred line break point in HTML text in a responsive design

Méthode 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> 

Merci à Jomo dans: Specifying a preferred line break point in HTML text in a responsive design

Answer 2

Puis-je vous suggérer d'obtenir un autre effet? Avoir trois points lorsque le texte est plus long que le conteneur?

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

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