在 iOS 电子邮件客户端中防止单词来自 breaking/wrapping 中间单词

Question

我正在为 HTML 电子邮件构建标记，但是我似乎找不到解决方案来防止单词在 iOS 电子邮件客户端中像这样中断中间单词：

HTML:

<table class="row">
    <tbody>
    <tr class="mail-title">
        <td class="wrapper last">
            <table class="twelve columns">
                <tr>
                    <td>
                        <h1 class="center">YOUR ORDER 101 HAS BEEN DISPATCHED</h1>
                    </td>
                    <td class="expander"></td>
                </tr>
            </table>
        </td>
    </tr>
    </tbody>
</table>

CSS:

.mail-title h1 {
    font-size      : 18px;
    text-transform : uppercase;
    font-weight    : normal;
    word-wrap      : none;
    word-break     : break-all;
}

我正在使用 Zurb Ink email framework，这就是 wrapper、last 和 expander 类的用途。

我已经看过 this answer，这是有道理的，因为 Ink 默认为 break-word，但这不适用于 iOS 邮件。

Answer 1

如果你想要一个完整的词而不是断词。使用 white-space:nowrap; 而不是 word-break : break-all;

CSS

.mail-title h1 {
    font-size : 18px;
    text-transform : uppercase;
    font-weight : normal;
    word-wrap : none;
    white-space : no-wrap;
}

Answer 2

此答案特定于那些使用 Zurb Ink 实施电子邮件模板的人。所以，这似乎是默认的 Ink 样式。看这里：https://github.com/zurb/ink/blob/master/css/ink.css#L71

我将 td 的声明更改为如下：

td {
    word-break      : normal;
    border-collapse : collapse !important;
}

已修复。

Answer 3

将以下内容添加到模板的自定义样式部分以覆盖 Ink 的样式。

td {
  word-break: break-word;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  hyphens: none;
  border-collapse: collapse !important;
}

在 iOS 电子邮件客户端中防止单词来自 breaking/wrapping 中间单词

Prevent words from breaking/wrapping mid-word in iOS email client

html

css

email

ios

zurb-ink