Предотвращение слов от взлома/обертывания среднего слова в почтовом клиенте iOS

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, что имеет смысл, поскольку значение по умолчанию для чернил равно break-word, но это не работает на почте iOS.

Answer 1

Этот ответ является специфическим для тех, кто осуществляет шаблоны писем с Zurb Ink. Таким образом, похоже, что это стиль стилизации по умолчанию. Смотрите здесь: https://github.com/zurb/ink/blob/master/css/ink.css#L71

Я изменил декларацию td быть, как показано ниже:

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

Fixed.

Answer 2

Если вы хотите получить полное слово вместо сломанных слов. использовать 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 3

Добавьте в свой раздел пользовательских стилей своего шаблона, чтобы переопределить стиль чернил.

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