我正在为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邮件。
答案 0 :(得分:8)
将以下内容添加到模板的自定义样式部分,以覆盖Ink的样式。
td {
word-break: break-word;
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
border-collapse: collapse !important;
}
答案 1 :(得分:4)
此答案特定于那些使用Zurb Ink实施电子邮件模板的人。因此,它似乎是默认的墨水样式。见这里:https://github.com/zurb/ink/blob/master/css/ink.css#L71
我将td
的声明更改为如下:
td {
word-break : normal;
border-collapse : collapse !important;
}
固定。
答案 2 :(得分:0)
如果你想要一个完整的单词而不是破碎的单词。使用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;
}