如何在 html 电子邮件中换行长文本答案

【问题标题】：How to wrap long text in html emails如何在 html 电子邮件中换行长文本
【发布时间】：2018-04-09 07:18:38
【问题描述】：

希望有人可以提供帮助。我的应用程序中有一些 HTML 电子邮件模板，它们工作正常并且在试金石中看起来很棒。电子邮件中的许多内容是用户通过 UI/编辑器（在本例中为 CKeditor）生成的。在大多数情况下，这可以正常工作，除非用户添加了很长的字符串或链接，然后导致长链接/文本脱离容器或完全破坏布局，具体取决于电子邮件客户端。

编辑器将文本包装在<p> 标签中，我无法轻松访问这些标签来添加修复。父 <td> 具有我希望防止问题的样式（如果内容未包含在 <p> 中，则这样做）。 TD 如下所示：

<td class="content-block" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; padding: 0 0 20px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; word-break: break-word;">{{- editorText -}}</td>

我在电子邮件模板顶部有一个 <style> 块，试图解决此问题：

<style media="all" type="text/css">
        @media only screen and (max-width: 640px) {
            ... some other styles ...

            .content-block p {
                display: inline-block !important;
                width: 560px !important;
                overflow-wrap: break-word !important; 
                word-wrap: break-word !important; 
                word-break: break-all !important; 
                word-break: break-word !important;
            }}
</style>

然而，这并没有什么区别，事情仍然会因一长串文本而中断。

感觉好像我在这里遗漏了一些明显的东西......除了将内联样式添加到<p> 标签之外，没有其他方法可以解决，这将很难做到。

谢谢

【问题讨论】：

你说的是一个完整的字符串吗？像一个很长的网址？例如：http://www.yoursite.com/?something&?somevariable&?otherthing=stuffwithnobreaksinthetext ?
如何在变量前添加带有样式的<span>？
您发现哪些电子邮件客户端出现故障？ word-break: break-all; 应该可以解决问题。我可以理解您无法编辑 <p> 标记，但并非所有电子邮件客户端都支持 <style> 标记，并且他们可能无法获取您的 CSS 的那部分。
你能发布一个文本问题的例子吗？ Lorem Ipsum 很好。我想知道它是整个文本的长度（2-3 页）、@scoopzilla 提到的 url 的长度还是特定于一个电子邮件阅读器（gmail、IOS 等）。
回答上面的问题是由一个长的不间断的字符串引起的，例如一个长的链接。将 overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; 添加到父 <td> 可以解决所有电子邮件客户端中的问题，除了不同的 Outlook 版本（2013、2016 和 Outlook.com）。我 99% 确定我是否可以访问编辑器添加的 <p> 标签并添加 word-break: break-all 它会修复它，但我不能。 @scoopzilla 我试过了，但是，用 <span> 包装 <p> 不是有效的标记，也不能解决问题。

标签： html email ckeditor html-email

【解决方案1】：

我也遇到了同样的问题。我试过了，它对我有用。

<td style = "word-break: normal; border-collapse : collapse !important;"> 
Lorem Ipsium 
</td>

【讨论】：

【解决方案2】：

问题是，并不是每个 Emailclient 都支持每个 html/css 标签。在这里您可以看到List of supported HTML/CSS Tags（如果链接不可用：搜索电子邮件模板支持的标签）

我建议自己编写包装代码，例如在一定数量的字符后插入 <br> 标签。

【讨论】：