Question

希望有人可以提供帮助。我的应用程序中有一些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>标签中添加内联样式之外，没有办法解决这个问题，这很难做到。

由于

Answer 1

我面临着同样的问题。我试过了，对我有用。

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

Answer 2

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

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

如何在html电子邮件中包装长文本

2 个答案: