我对电子邮件模板格式有非常具体的要求。我有以下模板，它从帮助台系统中提取属性。当用户/分析师回复时，我需要保留评论/描述的格式，但同时如果文本太宽，例如电子邮件链接，则需要将其包装在特定大小内。下面的模板在 IE 中工作正常，但在 outlook 中完全错误。这是由 Outlook 呈现的电子邮件正文。
<html>
<head>
<style type="text/css">
p,
td,
tr,
table {
font-family: Arial;
font-size: 12px;
text-align: center;
border-left: solid 0px border-right: solid 0px border-top: solid 0px border-bottom: solid 0px border: solid 0px
}
table,
td,
tr,
th {
border-collapse: collapse;
color: #FFF;
font-family: "Arial";
font-size: 14px;
}
.blacktextcentre {
font-family: "Arial";
font-size: 14px;
text-align: center;
color: #000;
}
.blacktextleft {
font-family: "Arial";
text-align: left;
font-size: 14px;
color: #000;
}
.whitetextleft {
font-family: "Arial";
text-align: left;
font-size: 14px;
color: #fff;
}
.whitetextcentre {
font-family: "Arial";
text-align: center;
font-size: 16px;
color: #fff;
background-color: #A6A6A6;
}
.blacktextleftbold {
font-family: "Arial";
text-align: left;
font-size: 14px;
color: #000;
font-weight: bold;
}
.blacktextrightbold {
font-family: "Arial";
text-align: right;
font-size: 14px;
color: #000;
font-weight: bold;
}
tr.border_bottom td {
border-bottom: 1pt solid black;
}
.blacktextcentreheading {
font-family: "Arial";
font-size: 40px;
text-align: center;
color: #000;
font-weight: bold;
}
.tableborder {
background-color: #007864;
}
pre.text {
white-space: pre-line;
width: 400px;
font-family: "Arial";
text-align: left;
font-size: 14px;
color: #000;
word-wrap: break-word;
}
img {
padding: 10px;
}
</style>
</head>
<table width="600" border="0" align="center">
<tr class="tableborder">
<td width="20" height="20"> </td>
<td width="10" height="20"> </td>
<td height="20"> </td>
<td width="10" height="20"> </td>
<td width="20" height="20"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="120"> </td>
<td>
<img src="logo" hspace="10" vspace="10">
</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="whitetextcentre">Ticket Update</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="blacktextleft">Dear Alex</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="blacktextleft">The Service Desk have updated your request. Please find a summary below.</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="10"> </td>
<td class="blacktextleft"> </td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="whitetextcentre">Ticket Summary</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height=""> </td>
<td>
<table width="100%" border="0" cellpadding="10">
<tr class="border_bottom">
<td width="90" class="blacktextrightbold">ID:</td>
<td class="blacktextleft">IR1174</td>
</tr>
<tr class="border_bottom">
<td width="90" class="blacktextrightbold">Title:</td>
<td class="blacktextleft">Printer - Not Working</td>
</tr>
<tr class="border_bottom">
<td width="90" class="blacktextrightbold">Time Added:</td>
<td class="blacktextleft">31/05/2016 17:03:40</td>
</tr>
<tr>
<td width="90" class="blacktextrightbold">Comment:</td>
<td><pre class="text">cxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvv
vvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvv
vvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvv
cxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvv
vvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvvvvvvvvvvvvvvvvvvvvcxvvvvvvv
vvvvvvvvvvvvvvvvvv</pre>
</td>
</tr>
</table>
</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="whitetextcentre">Further Information</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="10"> </td>
<td> </td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="blacktextleft">To update your ticket then please visit the <a HREF="server">portal</a> to provide an update or click on the link to <a HREF="mailto:address?subject=[IR1174]&body=">reply</a>.</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="30"> </td>
<td class="blacktextcentre">Kind regards,</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="30"> </td>
<td class="blacktextcentre">Service Desk</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr class="tableborder">
<td width="20"> </td>
<td width="10"> </td>
<td> </td>
<td width="10"> </td>
<td width="20"> </td>
</tr>
</table>
</body>
</html>关于如何保留格式但保持在特定宽度内的任何想法欢迎
这是 outlook 的渲染方式
这就是 IE 呈现它的方式以及它应该看起来的样子
这是pre.text类的位置
我已经进行了下面推荐的更改，这就是返回的内容:
这是代码:
<html>
<head>
<style type="text/css">
p, td, tr, table {
font-family: Arial;
font-size: 12px;
text-align: center;
border-left: solid 0px
border-right: solid 0px
border-top: solid 0px
border-bottom: solid 0px
border: solid 0px
}
table, td, tr, th {
border-collapse: collapse;
color: #FFF;
font-family: "Arial";
font-size: 14px;
}
.blacktextcentre {
font-family: "Arial";
font-size: 14px;
text-align: center;
color: #000;
}
.blacktextleft {
font-family: "Arial";
text-align: left;
font-size: 14px;
color: #000;
}
.whitetextleft {
font-family: "Arial";
text-align: left;
font-size: 14px;
color: #fff;
}
.whitetextcentre {
font-family: "Arial";
text-align: center;
font-size: 16px;
color: #fff;
background-color:#A6A6A6;
}
.blacktextleftbold {
font-family: "Arial";
text-align: left;
font-size: 14px;
color: #000;
font-weight:bold;
}
.blacktextrightbold {
font-family: "Arial";
text-align: right;
font-size: 14px;
color: #000;
font-weight:bold;
}
tr.border_bottom td {
border-bottom:1pt solid black;
}
.blacktextcentreheading {
font-family: "Arial";
font-size: 40px;
text-align: center;
color: #000;
font-weight:bold;
}
.tableborder {
background-color:#007864;
}
pre.text{
white-space: pre-line;
width: 400px;
font-family: "Arial";
text-align: left;
font-size: 14px;
color: #000;
word-wrap: break-word;
}
img{
padding: 10px;
}
.master-table {
width:600px;
}
</style>
</head>
<table class="master-table">
<tr class="tableborder">
<td width="20" height="20"> </td>
<td width="10" height="20"> </td>
<td height="20"> </td>
<td width="10" height="20"> </td>
<td width="20" height="20"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="120"> </td>
<td><img src="https://link/Content/images/maillogo.jpg" hspace="10" vspace="10"></td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="whitetextcentre">Ticket Update</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="blacktextleft">Dear Alex</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="blacktextleft">The Service Desk have updated your request. Please find a summary below.</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="10"> </td>
<td class="blacktextleft"> </td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="whitetextcentre">Ticket Summary</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height=""> </td>
<td><table width="100%" border="0" cellpadding="10">
<tr class="border_bottom">
<td width="90" class="blacktextrightbold">ID:</td>
<td class="blacktextleft">IR1174</td>
</tr>
<tr class="border_bottom">
<td width="90" class="blacktextrightbold">Title:</td>
<td class="blacktextleft">Printer - Not Working</td>
</tr>
<tr class="border_bottom">
<td width="90" class="blacktextrightbold">Time Added:</td>
<td class="blacktextleft">01/06/2016 09:16:20</td>
</tr>
<tr>
<td width="90" class="blacktextrightbold">Comment:</td>
<td><pre class="text">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</pre></td>
</tr>
</table></td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="whitetextcentre">Further Information</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="10"> </td>
<td> </td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="35"> </td>
<td class="blacktextleft">To update your ticket then please visit the <a HREF="https://server">portal</a> to provide an update or click on the link to <a HREF="mailto:mail@mail.org?subject=[IR1174]&body=">reply</a>.</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="30"> </td>
<td class="blacktextcentre">Kind regards,</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr>
<td class="tableborder"> </td>
<td height="30"> </td>
<td class="blacktextcentre">Service Desk</td>
<td> </td>
<td class="tableborder"> </td>
</tr>
<tr class="tableborder">
<td width="20"> </td>
<td width="10"> </td>
<td> </td>
<td width="10"> </td>
<td width="20"> </td>
</tr>
</table>
</body>
</html>最佳答案
将宽度属性应用于包含文本的 td-cell
<td width="510"><pre class="text">blablabla</pre></td>
关于Outlook 的 HTML 模板无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37550894/