Interrompe parole lunghe in html email in Outlook 2010

Sto prendendo l'input dell'utente finale e lo inserisco in un'email HTML. Ma se l'utente finale immette un URL lungo o una parola veramente lunga, interrompe il mio layout HTML in Outlook 2010 estendendo la colonna o div oltre la larghezza specificata.Interrompe parole lunghe in html email in Outlook 2010

In Chrome, Firefox, IE7 + e Safari, posso usare style = "table-layout: fixed" per forzare le colonne della tabella a determinate larghezze. Ma Outlook 2010 lo ignora e la parola lunga spinge la larghezza della tabella oltre la larghezza fissa.

Con Div, in Chrome, Firefox, IE7 + e Safari, posso usare style = "word-wrap: break-word; overflow: hidden; width: 100px", per correggere la larghezza div. Ma in Outlook 2010, spinge il div out oltre la larghezza fissa.

Come posso ottenere outlook2010 per racchiudere la parola lunga e rispettare la larghezza fissa?

Ecco il mio codice HTML di esempio:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
</head> 
<body> 
<table width="400" style="table-layout: fixed" border="1"> 
    <tr> 
     <td width="100"> 
      yo 
     </td> 
     <td width="300"> 
      Don't move me 
     </td> 
    </tr> 
</table> 
<table width="400" style="table-layout: fixed" border="1"> 
    <tr> 
     <td width="100" style="word-wrap: break-word; overflow: hidden; width: 100px" border="1"> 
      yoooooooooooooooooooooooooooooooooooooooooooooooooooooo 
     </td> 
     <td width="300"> 
      Ya moved me 
     </td> 
    </tr> 
</table> 
<table width="400" border="1"> 
    <tr> 
     <td width="100"> 
      <div style="word-wrap: break-word; overflow: hidden; width: 100px" border="1"> 
       yoooooooooooooooooooooooooooooooooooooooooooooooooooooo 
      </div> 
     </td> 
     <td width="300"> 
      Ya moved me 
     </td> 
    </tr> 
</table> 
</body> 
</html>

fonte

2012-04-10 Hoppe

Una soluzione più semplice potrebbe essere quella di dividere l'ingresso/assetto con elipsis beond certa lunghezza –

@PaulSullivan si tratta di una soluzione di messaggistica, però, quindi sono davvero sperando di fornire l'intero testo del messaggio per l'utente finale – Hoppe

poi dividere la frase - Credo che il motore di rendering di Outlook non sia basato su standard (e probabilmente piuttosto non documentato su come forzarlo a fare ciò che si vuole - google "motore di rendering html di Outlook 2010" –

utilizzare Microsoft proprietaria word-break:break-all;

<td style="word-break:break-all;">

fonte

2012-09-05 19:25:29 samanthasquared

Funziona davvero solo per MS Outlook. Se vuoi cross browser, c'è una discussione su questo qui: http://stackoverflow.com/a/12389079/1646397 – samanthasquared

In combinazione con il word-wrap, non funzionerà più. Inoltre, l'aggiunta di! Importante a qualsiasi regola compromette Outlook (2007-> 2013). Sono riuscito a far funzionare i cross-client/dispositivi - ma ci sono alcuni bug di visualizzazione in GMail come effetto collaterale dell'uso di word-break: break-all. A parte questo, per concludere: usa SOLO interruzioni di parole: break-all su tag TD e layout di tabella: fissato sulla tabella genitore e funzionerà su tutti! clienti. – Adrian

Sembra che funzioni in Outlook 2010 con tag TD. – Hoppe

So di essere in ritardo alla festa, ma la raccomandazione che posso fare per gli altri che urtano questo post e desidera utilizzare la proprietà word-break:break-all; consiste nel racchiudere la parola che è necessario suddividere in un elemento all'interno di <td> e quindi applicare word-break:break-all;.

Come così:

<td>Serial #: <a href="#" style="word-break:break-all;">1111222233334444555566667777888899990000</a></td>

Su questa nota è possibile utilizzare anche altre cose per rompere parole lunghe come l'elemento <wbr>, o il "carattere di spazio di larghezza zero" aka ZWSP che è , e se si vuoi i trattini quando il testo si rompe, usa .

Scegli questa (per ora brutta> <) demo che ho fatto in CodePen: Word-breaks in long string words.

Maggiori informazioni nei seguenti link:

The wbr tag - QuirksMode.org
<wbr> - MDN - Mozilla Rete degli sviluppatori
wbr (HTML element) - SitePoint.com

Spero che questo aiuti.

fonte

2015-04-10 16:50:26

Interrompe parole lunghe in html email in Outlook 2010

risposta

Problemi correlati