HTML: Soft hypen (& shy;) senza trattino?

Ho un piccolo problema di layout: su un sito Web dei clienti, mostriamo le informazioni di contatto delle persone in una piccola scatola. La larghezza di quella casella è vincasting. Come succede, ci sono persone con nomi molto lunghi (questo è in Germania, dopotutto …), e l’indirizzo e-mail è una concatenazione del nome e del cognome della famiglia. Il risultato: con certi nomi, l’indirizzo email supera i vincoli dati dalla casella about.

Inserimento di un ­ prima che il @ produca l’interruzione di riga corretta, ma assomiglia a questo:

 john.doe- @example.com 

È ansible sopprimere quel trattino? Non voglio usare
, perché per il 90% dei nomi, la larghezza disponibile è più che sufficiente.

Anche se non sono sicuro di come cross-browser (probabilmente abbastanza bene), puoi sempre usare il carattere di spazio sottile ( ) o lo spazio a larghezza zero ( ). ++

 john.doe @example.com 

++ Non suggerirei di usare lo spazio a larghezza zero, in quanto apparentemente alcuni browser non lo renderanno correttamente ( fonte ).

Utilizza uno spazio a larghezza zero:

 john.doe​@example.com 

In azione qui: http://jsfiddle.net/uTXwx/1/

Si consiglia di dare un’occhiata al word-wrap proprietà CSS.

E questa pagina sembra fare quello che vuoi.