Search code examples
htmlcsshtml-email

How to remove line break after first word, css?


I’m creating an email in html/css to send to people on a mailing list and everything works fine except that on mobile devices the line breaks after the first word for every paragraph like this.

example photo

The code was generated by an email template generator online and is as shown below. I'm pretty sure that about 80% of it is redundant.

<td style="padding:18px 0px 0px 0px; line-height:22px; text-align:inherit;" height="100%" valign="top" bgcolor="" role="module-content">
   <div>
      <div style="font-family: inherit; text-align: left">
         <span style="box-sizing: border-box; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 12px; vertical-align: baseline; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: initial; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; text-align: center; color: #516775; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; background-color: rgb(255, 254, 254)">Dear {{contact}}, Please print out this sheet and display at entry point.&nbsp;</span>
      </div>
      <div></div>
   </div>
</td>

What css element can I add to get rid of this, or alternatively what css element should I remove to get rid of this effect?


Solution

  • Remove white-space: pre-wrap; and everything should work as expected.

    Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space