Avvolgere indirizzi e-mail lunghi in piccole cassette

Ho una casella con una larghezza di 118 px che contiene un indirizzo e-mail. Io uso word-wrap: break-word; per avvolgere meglio gli indirizzi. Ma su un tipo speciale di indirizzi questo lo rende peggiore.Avvolgere indirizzi e-mail lunghi in piccole cassette

[email protected] 
ss- 
is.extremely.lame.de

causa di word-wrap: break-word; rompe dopo "indir" ma ceause il resto dell'indirizzo non rientra in una linea si rompe di nuovo in un "breakpoint preferita" che risulta essere il "-". Nel comportamento desiderato la seconda interruzione nell'indirizzo email non avverrà dopo "-" ma dopo "estremamente". Temo che non sia possibile solo con i CSS. Non è vero?

Qui potete vedere un piccolo esempio: http://jsfiddle.net/sbg8G/2/

fonte

2014-05-21 Juuro

Questa è una [domanda molto comune su StackOverflow] (http://stackoverflow.com/questions/856307/wordwrap-a-very-long-string) – misterManSam

@misterManSam No, non lo è. Non voglio semplicemente avvolgere il mio testo quando raggiunge la fine di una scatola. Lo faccio già con 'word-wrap: break-word;'. Voglio "resettare" i "punti di rottura preferiti" come "-,?,!, &, ..." per avvolgere il testo SOLO quando raggiunge la fine di una scatola! – Juuro

Cehck a questo http://jsfiddle.net/sbg8G/13/ –

Puoi provare a utilizzare text-overflow: puntini di sospensione;

overflow:hidden; 
text-overflow:ellipsis;

http://jsfiddle.net/sbg8G/8/

fonte

2014-05-21 07:43:17 Omm

Questo non è ciò che l'OP vuole. –

Sì, sarebbe una soluzione, ma purtroppo non posso farlo qui. – Juuro

La cosa migliore qui sarebbe quella di utilizzare <WBR> tag o  carattere di introdurre un morbido-break dove vuoi. es .:

Demo: http://jsfiddle.net/abhitalks/sbg8G/15/

HTML:

... 
<a href="[email protected]"> 
    [email protected]&#8203;address-is&#8203;.extremely.lame.de 
</a> 
...

Qui,  è inserito dopo il simbolo "@" e dopo "è" per provocare una rottura in quei punti.

Importante: word-wrap e word-break non ti aiuterà qui.

Motivo:

word-break è significato per CJK (cinese, giapponese, coreano) testi. (Reference). Il suo scopo principale è di evitare interruzioni di parole per il testo CJK. Il riposo è normale.
word-wrap viene utilizzato per specificare se il browser può interrompere le linee all'interno delle parole per impedire l'overflow. Questo è tutto. (Reference) La cosa principale da notare è che ".. le parole normalmente indistruttibili possono essere interrotte in punti arbitrari ..". I punti arbitrari non ti danno molto controllo, vero?

I trattini fissi aiutano a indicare i punti di interruzione. Hai un trattino nel tuo indirizzo e-mail e questo ti dà un suggerimento di rompere la parola lì.

Nota:

Un'alternativa migliore sarebbe avere CSS3 farlo per noi. word-wrap e word-break non consentono il controllo dei punti di interruzione. hyphens, ma sfortunatamente hyphens ancora "è una tecnologia sperimentale".

Rif: https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

hyphens dovrebbe essere in grado di fare il trucco insieme a:

hyphenate-limit-lines 
hyphenate-limit-zone 
hyphenate-character 
hyphenate-limit-before

Ma, questo non funziona attualmente come dovrebbe. Altrimenti, un  ti avrebbe aiutato.

Nota 2:

hyphens, sarebbe aggiungere un "trattino duro" (-) che causerebbe risultati indesiderati nel tuo caso (l'indirizzo e-mail cambierebbe).

Crediti: here, here e here

fonte

2014-05-21 08:08:48 Abhitalks

La soluzione ha fatto il trucco per me. Grazie! – gen

Avvolgere indirizzi e-mail lunghi in piccole cassette

risposta

Problemi correlati