在 Outlook 2010 中打破 html 电子邮件中的长词
Posted
技术标签:
【中文标题】在 Outlook 2010 中打破 html 电子邮件中的长词【英文标题】：Break long words in html email in outlook 2010 【发布时间】：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 style="table-layout: fixed" border="1">
<tr>
<td >
yo
</td>
<td >
Don't move me
</td>
</tr>
</table>
<table style="table-layout: fixed" border="1">
<tr>
<td style="word-wrap: break-word; overflow: hidden; width: 100px" border="1">
yoooooooooooooooooooooooooooooooooooooooooooooooooooooo
</td>
<td >
Ya moved me
</td>
</tr>
</table>
<table border="1">
<tr>
<td >
<div style="word-wrap: break-word; overflow: hidden; width: 100px" border="1">
yoooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
</td>
<td >
Ya moved me
</td>
</tr>
</table>
</body>
</html>
【问题讨论】：
一个更简单的解决方案可能是将输入/修剪分割成一定长度的省略号 @PaulSullivan 虽然这是一个消息传递解决方案，所以我真的希望将整个消息文本提供给最终用户 然后拆分句子 - 我相信 Outlooks 渲染引擎是非基于标准的（并且可能没有关于如何强制它执行你想要的操作的文档 - 谷歌“outlook 2010 html 渲染引擎” 您是否尝试过 pre css 属性 - 它可能在 2010 年有所作为？见***.com/questions/7284990/… 是的，这就是我推动你做的事情——它可能不优雅或不聪明，但它可以完成工作。 【参考方案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。如果你想要跨浏览器，这里有一个讨论 - ***.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以上是关于在 Outlook 2010 中打破 html 电子邮件中的长词的主要内容，如果未能解决你的问题，请参考以下文章
Outlook 2010 可以在 html 电子邮件中使用网络字体吗？
试图在 html 电子邮件中隐藏图像 - 在 Outlook 2010 中不起作用
outlook 2010到outlook 2007的数据迁移（注意单个PST文件限制20G）