Improved email client support for branded mails (#4663)

Improves compatibility with Outlook mail clients, preventing harsh word breaks. Credit to @vevers.
wintercms · Oct 14, 2019 · 0080f99 · 0080f99
1 parent 066b0c9
commit 0080f99
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/models/mailbrandsetting/custom.less b/models/mailbrandsetting/custom.less
@@ -13,11 +13,10 @@ body {
  line-height: 1.4;
  margin: 0;
  -moz-hyphens: auto;
- -ms-word-break: break-all;
+ -ms-word-break: break-word;
  width: 100% !important;
  -webkit-hyphens: auto;
  -webkit-text-size-adjust: none;
- word-break: break-all;
  word-break: break-word;
 }
 
@@ -75,6 +74,7 @@ code {
  color: @text-color;
  font-size: 16px;
  line-height: 1.5em;
+ word-break: break-all;
 }
 
 p.sub {
@@ -85,6 +85,10 @@ img {
  max-width: 100%;
 }
 
+.break-all, .break-all * {
+ word-break: break-all;
+}
+
 /* Layout */
 
 .wrapper {

diff --git a/views/mail/partial-panel.htm b/views/mail/partial-panel.htm
@@ -2,7 +2,7 @@
 ==
 {{ body|trim }}
 ==
-<table class="panel" width="100%" cellpadding="0" cellspacing="0">
+<table class="panel break-all" width="100%" cellpadding="0" cellspacing="0">
  <tr>
  <td class="panel-content">
  <table width="100%" cellpadding="0" cellspacing="0">

diff --git a/views/mail/partial-promotion.htm b/views/mail/partial-promotion.htm
@@ -2,7 +2,7 @@
 ==
 {{ body|trim }}
 ==
-<table class="promotion" align="center" width="100%" cellpadding="0" cellspacing="0">
+<table class="promotion break-all" align="center" width="100%" cellpadding="0" cellspacing="0">
  <tr>
  <td align="center">
  {{ body|md_safe }}