【问题标题】:HTML Email Text OverflowingHTML 电子邮件文本溢出
【发布时间】:2013-12-05 22:40:02
【问题描述】:

提前谢谢你。

当把源代码放在一起时,一切看起来都很好,并且可以正常显示(dreamweaver、浏览器等)。一旦电子邮件模板被发送出去,文本就会从包含它的 div 中“溢出”。

如果能在正确的方向上提供任何帮助,我将不胜感激!

代码如下:

 <!DOCTYPE html><HTML xmlns:o = 
"urn:schemas-microsoft-com:office:office"><HEAD><TITLE>Olympia Moving</TITLE>
<META charset=utf-8>
<STYLE>#content {
    PADDING-LEFT: 10px; WIDTH: 580px; DISPLAY: block;
}
UL {
    LIST-STYLE: circle none inside;
}
P {
    LINE-HEIGHT: 1.25em; MARGIN: 1.25em 0px; FONT-SIZE: 1em;
}
</STYLE>
</HEAD>
<BODY><img id=header 
src="http://olympiarelocationinc.com/mailing/img/img_001.jpg" width=600 
height=248 useMap=#header> 
<DIV id=content>
<P>Dear @@First_Name@@,</P>
<P>I tried reaching you by telephone today, without success, and thought that 
maybe communicating via email would be more convenient for you. <BR><BR>I 
received your contact information from our website, indicating that you are 
currently looking for movers to assist you on @@Move_Date@@. I would love to be 
able to help you out with your upcoming move. <BR><BR>I understand that you will 
be moving from @@PickCityStateZip@@ to @@DelCityStateZip@@. If this is incorrect 
please let me know. <BR><BR>I do have a few additional questions for you prior 
to providing you with an estimate. If you could please answer the following 
questions, it would be greatly appreciated and I will then promptly respond with 
both an estimate and a detailed explanation of all services we will provide for 
you. <BR></P>
<UL>
  <LI>
  <P>How many bedrooms do you currently have? </P>
  <LI>
  <P>Currently, do you live in a home, town house, or an apartment/condo?</P>
  <LI>
  <P>Is there an elevator in either location that you already have or still need 
  to reserve for a specific time? </P>
  <LI>
  <P>Are you going to be moving everything or only specific items? (If specific, 
  please list.) </P>
  <LI>
  <P>Are you going to be doing the packing yourself? </P>
  <LI>
  <P>Are you going to be moving any major appliances and/or heavy items such as 
  pianos, refrigerators, etc…? </P>
  <LI>
  <P>How long would you say the drive from your current location to your new 
  location would take? (Drive time, not distance.) </P></LI></UL><BR>
<P>If you are no longer moving, have chosen another carrier or would like to be 
removed from our database for any other reason please reply to this email with a 
brief explanation in the subject line. <BR><BR>I look forward to speaking with 
you soon and it would be a pleasure to help. I can be reached at the number 
listed below from 9am – 5pm or by email at all times. <BR><BR>On behalf of 
Olympia Moving and Storage we truly appreciate your consideration in our 
company! I hope to hear back from you soon! <BR><BR><BR>Thank You,<BR><BR>
<BR>
@@Signature@@
</DIV><img id=footer 
src="http://olympiarelocationinc.com/mailing/img/img_003.jpg" width=600 
height=87> <MAP name=header><AREA 
  href="https://www.facebook.com/movingcompany" shape=RECT target=_blank 
  coords=387,63,424,99><AREA href="https://twitter.com/OLYMPIAMOVINGIN" 
  shape=RECT target=_blank coords=423,63,468,98><AREA 
  href="http://www.bbb.org/chicago/business-reviews/moving-and-storage-company/olympia-moving-and-storage-in-skokie-il-47000954" 
  shape=RECT target=_blank coords=467,61,543,99><AREA 
  href="http://moveforhunger.org/what-we-do/" shape=RECT target=_blank 
  coords=543,59,592,100></MAP></BODY></HTML>

有些东西根本就没有加起来!当我从前景中查看来源时,它与原始来源相同。 GRR!

【问题讨论】:

    标签: html email text overflow


    【解决方案1】:

    电子邮件在表格中的表现更好。尝试将所有内容包装在 100% 宽的表格中。

    HTML 电子邮件与网络非常不同。 Here is some more info 了解如何设计 html 电子邮件。

    【讨论】:

    • 谢谢!我将所有代码重新格式化为表格形式,现在一切正常!
    • @user3072312 不要忘记将答案标记为正确。此外,如果您根据正确答案总结/分享最终解决方案,最好编辑您的问题,将更新后的解决方案放在底部。
    【解决方案2】:

    您是否有显示“溢出”的电子邮件副本?生成的电子邮件的查看源代码可能会帮助我们查看在生成过程中是否引入了某些东西,从而导致格式失效。

    【讨论】:

    • 这就是问题所在——来源是一样的。它从 Gmail 和 Outlook 中的容器溢出。我的 div 的 CSS 可能有问题吗?我在做一些不是“普遍”的事情吗?谢谢!
    【解决方案3】:

    一切都解决了!我把所有东西都变成了表格格式,代码如下:

    <!DOCTYPE html><HTML><HEAD>
    <STYLE>BODY {
        TEXT-ALIGN: center
    }
    P {
        TEXT-ALIGN: left
    }
    </STYLE>
    </HEAD>
    <BODY>
    <TABLE>
      <TBODY>
      <TR>
        <TD style="WIDTH: 600px"><IMG id=header 
          src="http://olympiarelocationinc.com/mailing/img/img_001.jpg" width=600 
          height=248 useMap=#header> </TD></TR>
      <TR>
        <TD style="WIDTH: 600px; HEIGHT: auto">
          <DIV id=content>
          <P>Dear @@First_Name@@,</P><BR>
          <P>I tried reaching you by telephone today, without success, and thought 
          that maybe communicating via email would be more convenient for you. 
          <BR><BR>I received your contact information from our website, indicating 
          that you are currently looking for movers to assist you on @@MoveDate@@. I 
          would love to be able to help you out with your upcoming move. <BR><BR>I 
          understand that you will be moving from @@PickCityStateZip@@ to 
          @@DelCityStateZip@@. If this is incorrect please let me know. <BR><BR>I do 
          have a few additional questions for you prior to providing you with an 
          estimate. If you could please answer the following questions, it would be 
          greatly appreciated and I will then promptly respond with both an estimate 
          and a detailed explanation of all services we will provide for you. 
          <BR></P>
          <UL>
            <LI>
            <P>How many bedrooms do you currently have? </P>
            <LI>
            <P>Currently, do you live in a home, town house, or an 
            apartment/condo?</P>
            <LI>
            <P>Is there an elevator in either location that you already have or 
            still need to reserve for a specific time? </P>
            <LI>
            <P>Are you going to be moving everything or only specific items? (If 
            specific, please list.) </P>
            <LI>
            <P>Are you going to be doing the packing yourself? </P>
            <LI>
            <P>Are you going to be moving any major appliances and/or heavy items 
            such as pianos, refrigerators, etc…? </P>
            <LI>
            <P>How long would you say the drive from your current location to your 
            new location would take? (Drive time, not distance.) </P></LI></UL><BR>
          <P>If you are no longer moving, have chosen another carrier or would like 
          to be removed from our database for any other reason please reply to this 
          email with a brief explanation in the subject line. <BR><BR>I look forward 
          to speaking with you soon and it would be a pleasure to help. I can be 
          reached at the number listed below from 9am – 5pm or by email at all 
          times. <BR><BR>On behalf of Olympia Moving and Storage we truly appreciate 
          your consideration in our company! I hope to hear back from you soon! 
          <BR><BR><BR>Thank You,<BR><BR>@@Signature@@</P></DIV></TD></TR>
      <TR>
        <TD style="WIDTH: 600px"><IMG 
          src="http://olympiarelocationinc.com/mailing/img/img_003.jpg" width=600 
          height=87> </TD></TR></TBODY></TABLE><MAP name=header><AREA 
      href="https://www.facebook.com/movingcompany" shape=RECT target=_blank 
      coords=387,63,424,99><AREA href="https://twitter.com/OLYMPIAMOVINGIN" 
      shape=RECT target=_blank coords=423,63,468,98><AREA 
      href="http://www.bbb.org/chicago/business-reviews/moving-and-storage-company/olympia-moving-and-storage-in-skokie-il-47000954" 
      shape=RECT target=_blank coords=467,61,543,99><AREA 
      href="http://moveforhunger.org/what-we-do/" shape=RECT target=_blank 
      coords=543,59,592,100></MAP></BODY></HTML>
    

    【讨论】:

      猜你喜欢
      • 2021-11-19
      • 1970-01-01
      • 2011-05-02
      • 2011-07-08
      • 1970-01-01
      • 2012-04-16
      • 2020-06-05
      • 2014-09-26
      • 1970-01-01
      相关资源
      最近更新 更多