电子邮件 Table 布局 - 重叠文本

Question

我正在使用此模板：https://mailbakery.com/template-store/product/basic-free-html-email-template/ 用于电子邮件简报。我在移动设备上遇到重叠文本的问题。我必须要有 jsfiddle 中没有的引用图片，但请发挥你的想象力，哈哈。我试过添加 white-space: normal、固定宽度和断字，但什么也没有。表格有 border-collapse: border.

这是 jsFiddle：https://jsfiddle.net/z5jybrda/

 /* Linked Styles */
      body {
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        min-width: 100% !important;
        width: 100% !important;
        background: #ffffff;
        -webkit-text-size-adjust: none;
      }
      a {
        color: #0000ee;
        text-decoration: none;
      }
      p {
        padding: 0 !important;
        margin: 0 !important;
      }

      /* Mobile styles */
      @media only screen and (max-device-width: 480px),
        only screen and (max-width: 480px) {
        .table_wrapper {
          width: 95%;
        }

        .mobile-full-width {
          width: 100% !important;
        }

        .mobile-shell {
          width: 100% !important;
          min-width: 100% !important;
        }

        .text-header,
        .m-center {
          text-align: center !important;
        }

        .m-font-15 {
          font-size: 15px !important;
        }

        .center {
          margin: 0 auto !important;
        }
        .container {
          padding: 20px 10px !important;
        }

        .td {
          width: 100% !important;
          min-width: 100% !important;
        }

        .m-br-15 {
          height: 15px !important;
        }
        .p30-15 {
          padding: 30px 15px !important;
        }
        .p0-15-30 {
          padding: 0px 15px 30px 15px !important;
        }
        .p0-15 {
          padding: 0px 15px !important;
        }
        .pb-30 {
          padding-bottom: 30px !important;
        }
        .mpb30 {
          padding-bottom: 30px !important;
        }
        .mpb15 {
          padding-bottom: 15px !important;
        }

        .m-td,
        .m-hide {
          display: none !important;
          width: 0 !important;
          height: 0 !important;
          font-size: 0 !important;
          line-height: 0 !important;
          min-height: 0 !important;
        }

        .column,
        .column-dir,
        .column-top,
        .column-empty,
        .column-empty2,
        .column-dir-top {
          float: left !important;
          width: 100% !important;
          display: block !important;
        }

        .column-empty {
          padding-bottom: 30px !important;
        }
        .column-empty2 {
          padding-bottom: 10px !important;
        }

        .content-spacing {
          width: 15px !important;
        }
      }


      @media only screen and (max-width: 310px) {
        .button {
          width: 195px !important;
        }

        img.quote {
          height: 22px;
          width: auto;
        }
        td.quote {
          width: 50px !important;
        }
      }

   <!-- WRAPPER -->
    <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
      <tr>
        <td align="center" valign="top">
          <table width="100%" border="0" cellspacing="0" cellpadding="0" style="background: #f4f5f6">
            <tr>
              <td align="center">
                <table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
                  <tr>
                    <td class="td" style="
                        width: 650px;
                        min-width: 650px;
                        font-size: 0pt;
                        line-height: 0pt;
                        padding: 0;
                        margin: 0;
                        font-weight: normal;
                      ">

                      <!-- SPACER -->
                      <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                          <td width="100%" height="30"></td>
                        </tr>
                      </table>

                      <!-- TESTIMONIAL -->
                      <table width="100%" border="0" cellpadding="0" cellspacing="0" style="background: #877454;">
                        <tr>
                          <td height="20"></td>
                        </tr>
                        <tr>
                          <td>
                            <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
                              <tr>
                                <td width="20"></td>
                                <td>
                                  <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
                                    <tr>
                                      <td valign="top" width="70" class="quote">
                                        <div><img src="./Newsletters/Images/colon.png" width="50" height="34" alt="quotation" style="display: block;" border="0" class="quote" />
                                        </div>
                                      </td>
                                      <td>
                                        <table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
                                          <tr>
                                            <td height="10"></td>
                                          </tr>
                                          <tr>
                                            <td style="font-size: 18px; color:#ffffff; font-family: 'Open Sans',Arial, sans-serif; font-style: italic; line-height: 1.5; " class="m-font-15">Thank you for your excellent leadership and support over the last year. We all greatly appreciate your efforts to steer us all in the right direction.
                                            </td>
                                          </tr>
                                          <tr>
                                            <td height="20"></td>
                                          </tr>
                                          <tr>
                                            <td style="font-size: 16px; color:#ffffff; font-family: 'Open Sans',Arial, sans-serif; ">
                                              <p>
                                                - John Doe recognizing <span style="text-decoration: underline;">John Doe</span>
                                              </p>
                                            </td>
                                          </tr>
                                        </table>
                                      </td>
                                    </tr>
                                  </table>
                                <td width="30"></td>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td height="40"></td>
                  </tr>
                </table>
                <!-- END TESTIMONIAL -->


              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    </td>
    </tr>
    </table>
  </body>

感谢任何帮助

Answer 1

好吧，这是 HTML 表中我最喜欢的问题之一，如果你像这样更改 td，那么发生在你身上的事情是由于 <td> 中缺少 space :

<td style="font-size: 16px; color:#ffffff; font-family: 'Open Sans',Arial, sans-serif; line-height: 22px;">

已解决 ;)

Answer 2

修改 <p> 中的行高解决了问题（在您添加的代码中定义为 line-height:0，这导致了问题）

<p> - John Doe recognizing <span style="text-decoration: underline;">John Doe</span> </p>

会是

<p style="line-height:1em;">  .... </p>

电子邮件 Table 布局 - 重叠文本

Email Table Layout - Overlapping text

html

css

email

text

html-email