Come rompere la linea un indirizzo email?

3

Dopo alcune discussioni, mi sono imbattuto in una situazione piuttosto complicata. Supponiamo che intendo visualizzare un indirizzo email. Ho, ovviamente, uno spazio limitato a disposizione sullo schermo: sii il browser o l'interfaccia utente dell'applicazione. Gli indirizzi email sono, tuttavia, limitati a 64 + 1 + 255 = 320 caratteri da RFC5321 , mentre lo stesso RFC blocca anche il percorso a 256 (che porta a un effettivo 254 ) personaggi. Questo è abbastanza per la maggior parte degli schermi: le righe che sto scrivendo in questo momento contengono meno di cento caratteri ciascuna.

Quindi, questo pone un piccolo problema quando si tenta di visualizzare gli indirizzi e-mail. A questo conteggio di caratteri, contenitori sufficientemente grandi sembrerebbero enormi per un indirizzo e-mail "di dimensioni predefinite" (la mia media è un po 'al di sotto dei 30 caratteri al momento), mentre un contenitore più piccolo comporterebbe un trabocco.

All'inizio l'opzione di utilizzare un contenitore più piccolo ma introdurre interruzioni di linea su indirizzi più lunghi sembra una buona idea.
Il che mi porta alla prima domanda importante a questo: Dove posso interrompere? Dopo una serie / relativa quantità di caratteri? Prima o dopo @ ?
E la seconda domanda segue subito dopo: Come posso interrompere? Spazio a larghezza zero? <wbr> in HTML? Inserire un trattino o no?

Sembra che ci siano ragioni per e contro qualcuno di questi, ma non posso per la vita di me trovare alcuna fonte da cui partire per la mia decisione. Sembra che nessuno abbia mai effettivamente affrontato questa situazione (cioè, il tetto di tenuta fisico non è mai esaurito). Il meglio che riesco a trovare sono alcuni styleguides editoriali online che preferiscono un indirizzo email in una riga e che regolano gli elementi circostanti per farlo funzionare. Bene, potremmo non avere questa opzione in alcune circostanze.

    
posta user98085 07.02.2014 - 03:06
fonte

1 risposta

6

Che ne dici di non interrompere la linea?

some.really.long.addres@my...

Puoi utilizzare text-overflow:ellipsis; e poi qualcosa come HTML - come posso visualizzare SUGGERIMENTO SOLO quando si attivano i puntini di sospensione? :

$('.mightOverflow')
    .bind('mouseenter', function () {
    var $this = $(this);

    if (this.offsetWidth < this.scrollWidth && !$this.attr('title'))
        $this.attr('title', $this.text()); });

Se stai facendo un'app touch / mobile, puoi anche aggiungere un gestore in modo che quando qualcuno fa clic mostra l'indirizzo completo in un'altra casella (permettendo anche copia / incolla, che è probabilmente il motivo principale che qualcuno vorrebbe per ottenere l'intero indirizzo), e in questo, basta fare un hard wrap (es. con word-wrap:break-word; ). Dal momento che è solo l'indirizzo che viene visualizzato in una sorta di contenitore di sovrapposizione, sarebbe del tutto naturale avvolgere in quel modo.

Se pensi che sarebbe utile vedere sempre i domini, potresti sempre accorciare indipendentemente l'indirizzo e le sezioni del dominio:

[email protected]

[email protected]....

Dovresti sperimentare con il codice esatto, ma avere <span> s attorno a entrambe le parti, con max-width:50%; text-overflow:ellipsis; è sulla falsariga di quello che sto pensando. Probabilmente richiederebbe un codice più intelligente per sfruttare al meglio lo spazio per visualizzare "[email protected]" (o un indirizzo breve e un dominio lungo) ma potrebbe essere fatto .

    
risposta data 07.02.2014 - 03:16
fonte

Leggi altre domande sui tag