CODEWITHSUNDEEP
htmlcssoutlookhtml-emailhyphenation
pitzki
pitzki

Reputation: 175

Can you stop hyphens in Outlook emails?

I am developing an email template. The words break to two lines with hyphens when viewed in Outlook emails. I tried a lot of different css properties on the 'td' tag but it's not doing anything.

Is this not possible at all to control?

  <tr>
     <td align="center" 
         style="text-transform: initial;
         letter-spacing: 0;
         font-size:40px;
         line-height: 48px;
         font-weight: 700;
         -webkit-text-size-adjust: 100%;
         -ms-text-size-adjust: 100%;
         mso-table-lspace: 0pt;
         mso-table-rspace: 0pt;
         word-break: break-word;
         -webkit-hyphens: none;
         -moz-hyphens: none;
         hyphens: none;
         border-collapse: collapse;">
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
     </td>
  </tr>
  
  <!--This is just a spacer-->
  <tr>
     <td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse; line-height:20px; font-size:20px" height="20px">&nbsp;
     </td>
  </tr>

  <tr>
     <td align="center" 
         style="-webkit-text-size-adjust: 100%;
         -ms-text-size-adjust: 100%;
         mso-table-lspace: 0pt;
         mso-table-rspace: 0pt;
         word-break: break-word;
         -webkit-hyphens: none;
         -moz-hyphens: none;
         hyphens: none;
         border-collapse: collapse;
         line-height: 30px; 
         letter-spacing:0.02em;
         font-size:17px;
         line-height:30px;">
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
     </td>
  </tr>

works breaking

words not breaking

Upvotes: 1

Views: 6905

Answers (4)

J.K.
J.K.

Reputation: 177

I use this in my tags for all my emails and it seems to work:

      * {
        word-break: keep-all;
        -moz-hyphens: none;
        -ms-hyphens: none;
        -webkit-hyphens: none;
        hyphens: none;
      }

Upvotes: 1

ijl8888
ijl8888

Reputation: 61

Add mso-hyphenate: none; That should fix the hyphenation problem you're experiencing.

Upvotes: 6

pitzki
pitzki

Reputation: 175

There was a modifier I got from a source that had this piece: w:AutoHyphenation I took it out.

Upvotes: 1

StepUp
StepUp

Reputation: 38094

As mdn says: about hyphens:

Words are not broken at line breaks, even if characters inside the words suggest line break points. Lines will only wrap at whitespace.

So you can create a class no-hyphens and use it:

.no-hyphens {
    hyphens: none;
}

Upvotes: 0

Related Questions