Why is there a line break in my email preview text in iOS Mail app?

Question

I have created a few HTML emails using Foundation for Emails. I am seeing a strange behavior in the iOS Mail app consistently with every email I create. The preview text has a line break in it for some reason. Here's what I mean:

Instead of showing the entire preview text as a continuous string, it's putting "Thanks" on it's own line.

This is the code for the preview text:

<span class="preheader" style="color:#f3f3f3;display:none!important;font-size:1px;line-height:1px;max-height:0;max-width:0;mso-hide:all!important;opacity:0;overflow:hidden;visibility:hidden">Thanks for your order! Your order number is 1538. Please save this order confirmation email for your records.</span>

I can't figure out why the preview text is displaying this way. Does anyone have any clue?

Even if I remove the preview text completely, the preview still displays with a line break. For example, if the .preheader section is empty, then iOS displays the preview text as:

Thanks
For Your...

I am very confused. Does anyone have any idea what could be causing this?

One other thing that might be relevant, besides the styles on the .preheader tag, there is also these styles on the body, which is the parent of the .preheader tag.

-moz-box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-text-size-adjust:100%;Margin:0;box-sizing:border-box;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;min-width:100%;padding:0;text-align:left;width:100%!important

Answer 1

The emails are being sent through BigCommerce. It's an issue with how BigCommerce encodes their emails. BigCommerce adds linebreaks to limit line length, but not properly using 'quoted-printable' encoding to ensure continuous lines remain continuous. Frustrating, but at least there is an explanation. I sent them an explanation so we'll see if it ever gets fixed.