在Outlook 2010中打破HTML電子郵件中的長單詞

我正在接收最終用戶輸入並將其插入到HTML電子郵件中。但是，如果最終用戶輸入一個長URL或真正長的單詞，它會通過將列或div擴展超出指定的寬度來打破Outlook 2010中的HTML佈局。在Outlook 2010中打破HTML電子郵件中的長單詞

在Chrome，Firefox，IE7 +和Safari中，我可以使用style =「table-layout：fixed」來強制表格列達到一定的寬度。但是Outlook 2010忽略了這一點，而長詞將表格寬度推出超出固定寬度。

使用Divs，在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>

來源

2012-04-10 Hoppe

一個簡單的解決方案可能是將輸入/修剪與elipsis分開一定的長度 – 2012-04-10 20:35:36

@PaulSullivan它是一個消息傳遞解決方案，所以我真的希望將整個消息文本提供給最終用戶 – Hoppe 2012-04-10 20:41:18

然後拆分句子 - 我相信Outlook的渲染引擎是非基於標準的（可能很沒記錄如何強制它做你想做的 - google「outlook 2010 html渲染引擎」 – 2012-04-10 21:33:33

使用微軟專有word-break:break-all;

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

來源

2012-09-05 19:25:29 samanthasquared

它的確適用於MS Outlook。如果你想跨瀏覽器，這裏有一個關於這個的討論 - http://stackoverflow.com/a/12389079/1646397 – samanthasquared 2012-09-13 16:44:24

結合word-wrap，它將不再工作。此外，添加！對任何規則來說重要的東西都會擾亂Outlook（2007-> 2013）。我確實設法讓它跨越了客戶端/設備 - 但是GMail中有一些顯示錯誤是使用word-break：break-all的副作用。除此之外，得出結論：僅使用單詞分解：在TD標籤和表格佈局上全部打破：固定在父表格上，它可以在所有情況下工作！客戶端。 – Adrian 2012-09-17 12:21:05

看起來像在Outlook 2010中使用TD標籤。 – Hoppe 2012-12-06 20:05:32

我知道我遲到了，但我的建議可以爲其他人碰到這篇文章想要使用屬性word-break:break-all;就是將你需要打破的單詞打包在<td>裏面的一個元素中，然後應用word-break:break-all;。

像這樣：

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

關於這一點，你也可以用其他的東西來打破長單詞像<wbr>元素，或「零寬度空格字符」又名ZWSP這是，如果你當文本中斷時使用連字符，請使用。

檢查這個（現在醜陋> <）演示中，我在做CodePen：在以下鏈接Word-breaks in long string words.

更多信息：

The wbr tag - QuirksMode.org
<wbr> - MDN - Mozilla的開發人員網絡
wbr (HTML element) - SitePoint.com

希望這會有所幫助。

來源

2015-04-10 16:50:26

在Outlook 2010中打破HTML電子郵件中的長單詞

回答

相關問題