Interrumpir palabras largas en el correo electrónico html en outlook 2010

Estoy tomando la entrada del usuario final e insertándola en un correo electrónico HTML. Pero si el usuario final ingresa una URL larga o una muy larga, rompe mi diseño HTML en Outlook 2010 al extender la columna o div más allá del ancho especificado.Interrumpir palabras largas en el correo electrónico html en outlook 2010

En Chrome, Firefox, IE7 + y Safari, puedo usar style = "table-layout: fixed" para forzar las columnas de la tabla a ciertos anchos. Pero Outlook 2010 ignora esto, y la palabra larga empuja el ancho de la tabla más allá del ancho fijo.

Con Divs, en Chrome, Firefox, IE7 + y Safari, puedo usar style = "word-wrap: break-word; overflow: hidden; width: 100px", para arreglar el ancho de div. Pero en Outlook 2010, empuja al div más allá del ancho fijo.

¿Cómo puedo obtener Outlook2010 para ajustar la palabra larga y respetar el ancho fijo?

Aquí es mi HTML de ejemplo:

<!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>

Fuente

2012-04-10 Hoppe

Una solución más simple puede ser dividir la entrada/recorte con elipsis por debajo de cierta longitud –

@PaulSullivan aunque es una solución de mensajería, así que realmente espero proporcionar todo el mensaje de texto al usuario final – Hoppe

y luego dividir la frase - Creo que el motor de renderizado de Outlook no está basado en estándares (y probablemente bastante indocumentado en cuanto a cómo hacer que haga lo que usted quiere - google "outlook 2010 html rendering engine" –

Utilice el propietario de Microsoft word-break:break-all;

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

Fuente

2012-09-05 19:25:29 samanthasquared

De hecho, funciona solo para MS Outlook. Si desea utilizar el navegador cruzado, hay un debate al respecto aquí: http://stackoverflow.com/a/12389079/1646397 – samanthasquared

En combinación con el ajuste de palabras, ya no funcionará. Además, agregar! Importante para cualquier regla desordena Outlook (2007-> 2013). Logré hacer que funcionara en clientes cruzados/dispositivos, pero hay algunos errores de visualización en GMail como un efecto secundario del uso del salto de palabras: break-all. Aparte de eso, para concluir: Utilice ÚNICAMENTE el salto de palabra: break-all en TD tag y table-layout: ¡arreglado en la tabla padre y funcionará en todos! clientela. – Adrian

Parece que funciona en Outlook 2010 con etiquetas TD. – Hoppe

Sé que llego tarde a la fiesta, pero la recomendación que puede hacer por los demás que chocan en esta publicación y desea utilizar la propiedad word-break:break-all; es para envolver la palabra que necesita para dividir en un elemento dentro de <td> y luego aplicar word-break:break-all;.

así:

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

En esta nota también se puede usar otras cosas para romper las palabras largas como el elemento de <wbr>, o el "carácter de espacio de ancho cero" alias ZWSP que es , y si quiere guiones cuando el texto se rompe, use el .

Marque esta (por ahora fea> <) de demostración que hice en CodePen: Word-breaks in long string words.

Más información en los siguientes enlaces:

The wbr tag - QuirksMode.org
<wbr> - MDN - Mozilla Red de desarrolladores
wbr (HTML element) - SitePoint.com

Espero que esto ayude.

Fuente

2015-04-10 16:50:26

Interrumpir palabras largas en el correo electrónico html en outlook 2010

Respuesta

Cuestiones relacionadas