在Outlook 2010中打破HTML电子邮件中的长单词

我正在接收最终用户输入并将其插入到HTML电子邮件中。但是，如果最终用户输入一个长URL或真正长的单词，它会通过将列或div扩展超出指定的宽度来打破Outlook 2010中的HTML布局。在Outlook 2010中打破HTML电子邮件中的长单词

在Chrome，Firefox，IE7 +和Safari中，我可以使用style =“table-layout：fixed”来强制表格列达到一定的宽度。但是Outlook 2010忽略了这一点，而长词将表格宽度推出超出固定宽度。

使用Divs，在Chrome，Firefox，IE7 +和Safari中，我可以使用style =“word-wrap：break-word; overflow：hidden; width：100px”来修复div宽度。但在Outlook 2010中，它将div推出超出固定宽度。

我怎样才能让outlook2010打包长词，并兑现固定宽度？

这里是我的示例HTML：

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

来源

2012-04-10 Hoppe

一个简单的解决方案可能是将输入/修剪与elipsis分开一定的长度 – 2012-04-10 20:35:36

@PaulSullivan它是一个消息传递解决方案，所以我真的希望将整个消息文本提供给最终用户 – Hoppe 2012-04-10 20:41:18

然后拆分句子 - 我相信Outlook的渲染引擎是非基于标准的（可能很没记录如何强制它做你想做的 - google“outlook 2010 html渲染引擎” – 2012-04-10 21:33:33

使用微软专有word-break:break-all;

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

来源

2012-09-05 19:25:29 samanthasquared

它的确适用于MS Outlook。如果你想跨浏览器，这里有一个关于这个的讨论 - http://stackoverflow.com/a/12389079/1646397 – samanthasquared 2012-09-13 16:44:24

结合word-wrap，它将不再工作。此外，添加！对任何规则来说重要的东西都会扰乱Outlook（2007-> 2013）。我确实设法让它跨越了客户端/设备 - 但是GMail中有一些显示错误是使用word-break：break-all的副作用。除此之外，得出结论：仅使用单词分解：在TD标签和表格布局上全部打破：固定在父表格上，它可以在所有情况下工作！客户端。 – Adrian 2012-09-17 12:21:05

看起来像在Outlook 2010中使用TD标签。 – Hoppe 2012-12-06 20:05:32

我知道我迟到了，但我的建议可以为其他人碰到这篇文章想要使用属性word-break:break-all;就是将你需要打破的单词打包在<td>里面的一个元素中，然后应用word-break:break-all;。

像这样：

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

关于这一点，你也可以用其他的东西来打破长单词像<wbr>元素，或“零宽度空格字符”又名ZWSP这是，如果你当文本中断时使用连字符，请使用。

检查这个（现在丑陋> <）演示中，我在做CodePen：在以下链接Word-breaks in long string words.

更多信息：

The wbr tag - QuirksMode.org
<wbr> - MDN - Mozilla的开发人员网络
wbr (HTML element) - SitePoint.com

希望这会有所帮助。

来源

2015-04-10 16:50:26

在Outlook 2010中打破HTML电子邮件中的长单词

回答

相关问题