html表格中的换行符答案

【问题标题】：Line break in html tablehtml表格中的换行符
【发布时间】：2018-11-23 03:41:36
【问题描述】：

我有一个fiddle，我从一个特定的设计中复制了它。

我在问题陈述中附上的屏幕截图部分。

问题陈述：

我想知道我应该在小提琴中进行哪些更改，以便我能够在以下行之间提供 换行符，如屏幕截图所示，这是小提琴中的也是如此。

我在上述几行的小提琴中使用的 HTML 代码的 sn-ps 是：

  <tr>
    <td style="padding-bottom: 3%;text-align:right;">when:</td>
    <td style="padding-bottom: 3%;padding-left: 10%;">March 28/18 @ 7:00pm to March 30/18 @ 7:00pm</td>
  </tr>

【问题讨论】：

在第一个 td 中添加表格并在其中留出空间可能更容易？头部的 CSS 在所有电子邮件客户端中都无法正常工作。你内联了吗？
@Syfer 是的，我正在为 HTML 电子邮件编码做内联样式，我们只做内联。你能在小提琴中更新吗？这是最新的fiddle
@Syfer 你在吗？
贴出来作为答案让你看看。

标签： css html-table html-email line-breaks

【解决方案1】：

这是我所做的：

将line-break类添加到指定的<td>

您可以使用word-wrap: break-word; 在 div 中添加多行文本。 word-wrap 基于 div 的 width 工作。

.line-break {
  word-wrap: break-word;
  width: 300px;
}

<html>
<body>


<p style="font-size:20px;margin-left:22%;color:#55BEC7;"> hi XYZ, </p>

<table style="width:100%;display: flex;
  justify-content: center;">
  
 <tbody style="font-size:20px;padding-left: 15%;"> 
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">type:</td>
	<td style="padding-bottom: 3%;padding-left: 10%;">availability check request</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">estimated total:</td>
    <td style="padding-bottom: 3%;padding-left: 10%;">$250.00</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">what</td>
    <td style="padding-bottom: 3%;padding-left: 10%;">chainsaw</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">how many</td>
    <td style="padding-bottom: 3%;padding-left: 10%;">2</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">when:</td>
    <td style="padding-bottom: 3%;padding-left: 10%;" class="line-break">March 28/18 @ 7:00pm to March 30/18 @ 7:00pm</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">who:</td>
    <td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
  </tr>
  </tbody>
</table>



<h2 style="text-align:center;color:#484848;margin-top:2.5%;margin-bottom:5%;">steps to earn your money:</h2>
<div class="steps" style="text-align: left;
    margin-left: auto;
    width: 50%;
    padding-right: 0%;
    margin-right: auto;color:#484848;font-size:20px;">
<p>1. click here to open the ABC app to the posting requests page </p>
<p>2. click on availability check request</p>
<p>3. say yes, its availabile ot suggest another date it is</p>
<p>4. wait the 1 or 24 hour confirmation good</p>
<p>5. three days after the booking ends money will be send to your account</p>
</div>
</body>
</html>

这里是JSFiddle

【讨论】：

感谢您的回答。我想知道你是否可以在小提琴中更新它。这样，可视化会更容易。
@user5447339 添加了小提琴链接
@user5447339 每当你去小提琴。 CTRL-F，粘贴class="line-break"，它会引导你到我插入的课程。
我想知道您是否熟悉编码 html 电子邮件？我已经更新了你的fiddle。我已将您的 CSS 代码用作内联样式。
你在吗？

【解决方案2】：

我知道这个问题已经得到解答，但这里有另一种解决方法。

注意：我已添加到您的代码中以显示前后的示例。

如果您需要，这里是相同代码的fiddle。

<html>
<body>


<p style="font-size:20px;margin-left:22%;color:#55BEC7;"> hi XYZ, </p>

<!-- new way -->
<table style="width:100%;">
 <tbody> 
  <tr>
    <td>
        <table style="width:100%;">
         <tbody> 
          <tr>
           <td width="50%" align="right" style="font-family:Arial; font-size:12px;color:#000000;;padding:0px 20px;">type </td>
           <td width="50%" style="font-family:Arial; font-size:12px;color:#000000;text-align:left;padding:0px 10px;">availability check request</td>
	        </tr>
           
          <tr>
           <td width="50%" align="right" style="font-family:Arial; font-size:12px;color:#000000;;padding:0px 20px;">type </td>
           <td width="50%" style="font-family:Arial; font-size:12px;color:#000000;text-align:left;padding:0px 10px;">availability check request</td>
	        </tr>
           
          <tr>
           <td width="50%" align="right" style="font-family:Arial; font-size:12px;color:#000000;;padding:0px 20px;">type </td>
           <td width="50%" style="font-family:Arial; font-size:12px;color:#000000;text-align:left;padding:0px 10px;">availability check request</td>
	        </tr>
         </tbody>
        </table>
    </td>
	  </tr>
  </tbody>
</table>
<!-- new way -->

<table style="width:100%;display: flex;
  justify-content: center;">
  
 <tbody style="font-size:20px;padding-left: 15%;"> 
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">type:</td>
	<td style="padding-bottom: 3%;padding-left: 10%;">availability check request</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">estimated total:</td>
    <td style="padding-bottom: 3%;padding-left: 10%;">$250.00</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">what</td>
    <td style="padding-bottom: 3%;padding-left: 10%;">chainsaw</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">how many</td>
    <td style="padding-bottom: 3%;padding-left: 10%;">2</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">when:</td>
    <td style="padding-bottom: 3%;padding-left: 10%;word-wrap: break-word;
    width: 300px;" >March 28/18 @ 7:00pm to March 30/18 @ 7:00pm</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">who:</td>
    <td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
  </tr>
  </tbody>
</table>



<h2 style="text-align:center;color:#484848;margin-top:2.5%;margin-bottom:5%;">steps to earn your money:</h2>
<div class="steps" style="text-align: left;
    margin-left: auto;
    width: 50%;
    padding-right: 0%;
    margin-right: auto;color:#484848;font-size:20px;">
<p>1. click here to open the ABC app to the posting requests page </p>
<p>2. click on availability check request</p>
<p>3. say yes, its availabile ot suggest another date it is</p>
<p>4. wait the 1 or 24 hour confirmation good</p>
<p>5. three days after the booking ends money will be send to your account</p>
</div>
</body>
</html>

干杯

【讨论】：

你用过table inside table？这是正确的方法吗？
我问的原因是因为我以前没有编写过html电子邮件。 this 不是首选方式吗？
fiddle 中的代码是我第一次编写。
您可以使用嵌套表。推荐。这不是偏好问题，必须对其进行测试以了解它在不同电子邮件客户端中的工作方式。例如，Outlook 将传递两个 TD 内部的兄弟 tr。所以最好有嵌套表。优势：您可以完全控制。缺点：代码会略有增加。
抱歉，意思是说填充 Outlook 例如会给两个 TD 内部的兄弟 tr 提供 padding。所以最好有嵌套表。