在 Outlook 2010 中打破 html 电子邮件中的长词答案

【问题标题】：Break long words in html email in outlook 2010在 Outlook 2010 中打破 html 电子邮件中的长词
【发布时间】：2012-04-23 04:07:49
【问题描述】：

我正在接受最终用户的输入并将其插入到 HTML 电子邮件中。但是，如果最终用户输入一个长 URL 或非常长的单词，它会破坏我在 Outlook 2010 中的 HTML 布局，因为它会将列或 div 扩展到指定的宽度之外。

在 Chrome、Firefox、IE7+ 和 Safari 中，我可以使用 style="table-layout:fixed" 将表格列强制为特定宽度。但是 Outlook 2010 忽略了这一点，长字将表格宽度推到了固定宽度之外。

对于 div，在 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>

【问题讨论】：

一个更简单的解决方案可能是将输入/修剪分割成一定长度的省略号
@PaulSullivan 虽然这是一个消息传递解决方案，所以我真的希望将整个消息文本提供给最终用户
然后拆分句子 - 我相信 Outlooks 渲染引擎是非基于标准的（并且可能没有关于如何强制它执行你想要的操作的文档 - 谷歌“outlook 2010 html 渲染引擎”
您是否尝试过 pre css 属性 - 它可能在 2010 年有所作为？见stackoverflow.com/questions/7284990/…
是的，这就是我推动你做的事情——它可能不优雅或不聪明，但它可以完成工作。

标签： html html-email outlook-2010

【解决方案1】：

我知道我迟到了，但我可以为其他碰到这篇文章并想要使用属性 word-break:break-all; 的人提出的建议是将你需要中断的单词包含在 @ 内的一个元素中987654326@，然后申请word-break:break-all;。

像这样：

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

在此注释中，您还可以使用其他东西来打破长词，例如 <wbr> 元素，或“零宽度空格字符”又名 ZWSP，即 &#8203;，如果您想要在文本中断时使用连字符，使用&shy;。

查看我在 CodePen 中制作的这个（现在很难看 >Word-breaks in long string words.

以下链接中的更多信息：

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

希望这会有所帮助。

【讨论】：

Outlook 桌面不考虑内联元素的分词。它必须位于像 <p> 或 <td> 这样的块元素上。

【解决方案2】：

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

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

【讨论】：

它确实只适用于 MS Outlook。如果你想要跨浏览器，这里有一个讨论 - stackoverflow.com/a/12389079/1646397
结合自动换行，它不再起作用了。此外，将 !important 添加到任何规则都会使 Outlook (2007->2013) 混乱。我确实设法让它跨客户端/设备工作 - 但在 GMail 中有一些显示错误作为使用 word-break:break-all 的副作用。除此之外，总结一下：在 TD 标记上只使用 word-break:break-all 和在父表上使用 table-layout:fixed ，它将适用于所有！客户。
它仍然是唯一适用于 Outlook 2013 中 td 单元格中的长连续文本的方法。
注意：这会破坏普通文本的自动换行！如果包含在具有此样式的标签中，您的文字将在所有客户端的中间被截断。
在企业版 Outlook 365 中不起作用...我讨厌 Outlook