19

我正在接受最终用户输入并将其插入到 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>
4

2 回答 2

44

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

  <td style="word-break:break-all;">
于 2012-09-05T19:25:29.773 回答
4

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

像这样：

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

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

检查我在 CodePen 中制作的这个（现在很难看><）演示：长字符串单词中的断字。

以下链接中的更多信息：

希望这可以帮助。

于 2015-04-10T16:50:26.777 回答