在outlook 2010中打破html电子邮件中的长词

Question

在outlook 2010中打破html电子邮件中的长词

Hop*_*ppe 16 html html-email outlook-2010

我正在接收最终用户输入并将其插入HTML电子邮件中.但是,如果最终用户输入长URL或非常长的单词,则会通过扩展列或div超出指定的宽度来破坏Outlook 2010中的HTML布局.

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

sam*_*red 35

使用Microsoft专有 word-break:break-all;

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

Run Code Online (Sandbox Code Playgroud)

注意:这会破坏正常文本的自动换行!如果包含在具有此样式的标记中,您的单词将在所有客户端的中间被截断. (3认同)
它确实适用于MS Outlook.如果你想要跨浏览器,这里有一个讨论 - http://stackoverflow.com/a/12389079/1646397 (2认同)
与自动换行结合使用，它将不再起作用。此外，将 !important 添加到任何规则都会弄乱 Outlook (2007->2013)。我确实设法让它在跨客户端/设备上工作 - 但是 GMail 中存在一些显示错误，这是使用 word-break:break-all 的副作用。除此之外，总结一下：在 TD 标签上只使用 word-break:break-all ，在父表上使用 table-layout:fixed ，它对所有的都有效！客户。 (2认同)

Answer 2

Ric*_*Zea 5

我知道我迟到了，但我可以为其他遇到这篇文章并想要使用该属性的人提出的建议word-break:break-all;是将需要打破的单词包装在内的元素中<td>，然后应用word-break:break-all;。

就像这样：

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

Run Code Online (Sandbox Code Playgroud)

在这一点上，您还可以使用其他东西来打破长单词，例如<wbr>元素，或“零宽度空格字符”又名 ZWSP ，如果您想要在文本中断时使用连字符，请使用.

检查我在 CodePen 中制作的这个（目前丑陋的><）演示：长字符串单词中的断词。

更多信息请参见以下链接：

wbr 标签- QuirksMode.org
<wbr>- MDN - Mozilla 开发者网络
wbr（HTML 元素） -SitePoint.com

希望这可以帮助。

归档时间：	13 年，8 月前
查看次数：	23370 次
最近记录：	10 年，8 月前