在 Outlook 2010 中打破 html 电子邮件中的长词
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10096012/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Break long words in html email in outlook 2010
提问by Hoppe
I'm taking end user input and inserting it into an HTML email. But if the end user enters a long URL or really long word, it breaks my HTML layout in Outlook 2010 by extending the column or div beyond the width specified.
我正在接受最终用户输入并将其插入到 HTML 电子邮件中。但是，如果最终用户输入很长的 URL 或非常长的单词，它会通过将列或 div 扩展到指定宽度之外来破坏我在 Outlook 2010 中的 HTML 布局。
In Chrome, Firefox, IE7+, and Safari, I can use style="table-layout:fixed" in order to force the table columns to certain widths. But Outlook 2010 ignores this, and the long word pushes the table width out beyond the fixed width.
在 Chrome、Firefox、IE7+ 和 Safari 中，我可以使用 style="table-layout:fixed" 将表格列强制为特定宽度。但 Outlook 2010 忽略了这一点，长字将表格宽度推到固定宽度之外。
With Divs, In Chrome, Firefox, IE7+, and Safari, I can use style="word-wrap:break-word; overflow:hidden; width:100px", to fix the div width. But in Outlook 2010, it pushes the div out beyond the fixed width.
使用 Divs，在 Chrome、Firefox、IE7+ 和 Safari 中，我可以使用 style="word-wrap:break-word; overflow:hidden; width:100px" 来修复 div 宽度。但在 Outlook 2010 中，它会将 div 推出超出固定宽度。
How can I get outlook2010 to wrap the long word, and honor the fixed width?
如何让outlook2010包装长字，并遵守固定宽度？
Here is my sample HTML:
这是我的示例 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>
回答by samanthasquared
Use the Microsoft proprietary word-break:break-all;
使用 Microsoft 专有 word-break:break-all;
<td style="word-break:break-all;">
回答by Ricardo Zea
I know I'm late to the party, but the recommendation I can make for others that bump into this post and want to use the property word-break:break-all;is to wrap the word you need to break in an element inside the <td>and then apply word-break:break-all;.
我知道我参加聚会迟到了，但是我可以为word-break:break-all;遇到此帖子并想要使用该属性的其他人提出的建议是将您需要打断的单词包含在 中的元素中<td>，然后应用word-break:break-all;.
Like so:
像这样：
<td>Serial #: <a href="#" style="word-break:break-all;">1111222233334444555566667777888899990000</a></td>
On this note you can also use other things to break long words like the <wbr>element, or the "zero-width space character" a.k.a. ZWSP which is ​, and if you want hyphens when the text breaks, use the ­.
在本笔记中，您还可以使用其他东西来断开长单词，例如<wbr>元素，或“零宽度空格字符”又名 ZWSP ​，如果您在文本断开时需要连字符，请使用­.
Check this (for now ugly ><) demo I made in CodePen: Word-breaks in long string words.
检查我在 CodePen 中制作的这个（现在丑陋的 ><）演示：长字符串单词中的分词。
More info in the following links:
以下链接中的更多信息：
- The wbr tag- QuirksMode.org
<wbr>- MDN - Mozilla Developer Network- wbr (HTML element)- SitePoint.com
- wbr 标签- QuirksMode.org
<wbr>- MDN - Mozilla 开发者网络- wbr (HTML 元素)- SitePoint.com
Hope this helps.
希望这可以帮助。
