您可以停止 Outlook 电子邮件中的连字符吗？

问题描述

我正在开发电子邮件模板。在 Outlook 电子邮件中查看时，这些单词会分成两行，并带有连字符。我在 'td' 标签上尝试了很多不同的 css 属性，但它没有做任何事情。

这根本无法控制吗？

  <tr>
     <td align="center" 
         style="text-transform: initial;
         letter-spacing: 0;
         font-size:40px;
         line-height: 48px;
         font-weight: 700;
         -webkit-text-size-adjust: 100%;
         -ms-text-size-adjust: 100%;
         mso-table-lspace: 0pt;
         mso-table-rspace: 0pt;
         word-break: break-word;
         -webkit-hyphens: none;
         -moz-hyphens: none;
         hyphens: none;
         border-collapse: collapse;">
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
     </td>
  </tr>
  
  <!--This is just a spacer-->
  <tr>
     <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse; line-height:20px; font-size:20px" height="20px">&nbsp;
     </td>
  </tr>

  <tr>
     <td align="center" 
         style="-webkit-text-size-adjust: 100%;
         -ms-text-size-adjust: 100%;
         mso-table-lspace: 0pt;
         mso-table-rspace: 0pt;
         word-break: break-word;
         -webkit-hyphens: none;
         -moz-hyphens: none;
         hyphens: none;
         border-collapse: collapse;
         line-height: 30px; 
         letter-spacing:0.02em;
         font-size:17px;
         line-height:30px;">
        <div>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
     </td>
  </tr>

解决方法

我从一个有这篇文章的来源得到了一个修饰符： w:自动断字 我把它拿出来了。

,

As mdn says: 关于连字符：

单词不会在换行符处被打断，即使里面的字符 单词建议换行点。行只会在空格处换行。

因此您可以创建一个类 no-hyphens 并使用它：

.no-hyphens {
    hyphens: none;
}