Space considering as new line in html

Question

We have two html files, by looks both look similar, but when we actually render, in one of them we have additional line breaks. May I know how to avoid it.

<p class="MsoNoSpacing"><span style="font-size: 12px; font-family: Calibri;font-family:Calibri;font-family:Calibri;"><feff><feff></span><span style="font-size: 12px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; font-family: Calibri;"><feff></span><span style="font-size: 12px; font-family: Calibri; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><feff></span><span style="font-size: 12px; font-family: Calibri; color: rgb(27, 30, 36); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><feff></span><span style="font-size: 12px; font-family: Calibri; color: rgb(27, 30, 36); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><feff></span><span style="font-size: 12px; font-family: Calibri; color: rgb(27, 30, 36); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><feff></span><span style="font-size: 9pt; color: rgb(27, 30, 36); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><span style="font-family: Calibri; font-size: 12px;"><feff></span><span style="font-family: Calibri; font-size: 12px;">Hi Mr. Calipjo,</span></span><span style="font-family:"Cambria",serif;
mso-ascii-theme-font:major-latin;mso-hansi-theme-font:major-latin"><o:p></o:p></span></p><p class="MsoNoSpacing"><span style="font-family:"Cambria",serif;mso-ascii-theme-font:
major-latin;mso-hansi-theme-font:major-latin"><span style="font-family: Calibri; font-size: 12px;"> </span><o:p></o:p></span></p><p class="MsoNoSpacing"><span style="font-family: Calibri; font-size: 12px;"> </span></p><p class="MsoNoSpacing"><span style="font-family:"Cambria",serif;mso-ascii-theme-font:
major-latin;mso-hansi-theme-font:major-latin"><span style="font-family: Calibri; font-size: 12px;">Greetings!</span><o:p></o:p></span></p><p class="MsoNoSpacing"><span style="font-family: Calibri; font-size: 12px;"> </span></p><p class="MsoNoSpacing"><span style="font-family:"Cambria",serif;mso-ascii-theme-font:
major-latin;mso-hansi-theme-font:major-latin"><span style="font-family: Calibri; font-size: 12px;">We apologize for the inconvenient
that this may have cause you.</span><o:p></o:p></span></p><p class="MsoNoSpacing"><span style="font-family: Calibri; font-size: 12px;"> </span></p><p class="MsoNoSpacing"><span style="font-family: Calibri; font-size: 12px;"> </span></p><p class="MsoNoSpacing"><span style="font-family:"Cambria",serif;mso-ascii-theme-font:
major-latin;mso-hansi-theme-font:major-latin"><span style="font-family: Calibri; font-size: 12px;">As of now we are still
coordinating this request to our support team, we are waiting for the feedback
from our support team.</span><o:p></o:p></span></p><p class="MsoNoSpacing"><span style="font-family: Calibri; font-size: 12px;"> </span></p><p class="MsoNoSpacing"><span style="font-family:"Cambria",serif;mso-ascii-theme-font:
major-latin;mso-hansi-theme-font:major-latin"><span style="font-family: Calibri; font-size: 12px;">We will update you once we received
a feedback.</span><o:p></o:p></span></p><p class="MsoNoSpacing"><span style="font-family: Calibri; font-size: 12px;"> </span></p><p class="MsoNoSpacing"><span style="font-family: Calibri; font-size: 12px;"> </span></p><p><span style="font-family: Calibri; font-size: 12px;">









<p class="MsoNoSpacing"><span style="font-size: 12px; font-family: Calibri;font-family:Calibri;font-family:Calibri;"><feff><feff></span><span style="font-size: 12px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; font-family: Calibri;"><feff></span><span style="font-size: 12px; font-family: Calibri; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><feff></span><span style="font-size: 12px; font-family: Calibri; color: rgb(27, 30, 36); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><feff></span><span style="font-size: 12px; font-family: Calibri; color: rgb(27, 30, 36); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><feff></span><span style="font-size: 12px; font-family: Calibri; color: rgb(27, 30, 36); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><feff></span><span style="font-size: 9pt; color: rgb(27, 30, 36); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;"><span style="font-family: Calibri; font-size: 12px;"><feff></span><span style="font-family: Calibri; font-size: 12px;">Hi Mr. Calipjo,</span></span><span style="font-family:"Cambria",serif;
mso-ascii-theme-font:major-latin;mso-hansi-theme-font:major-latin"><o:p></o:p></span></p><p class="MsoNoSpacing"><span style="font-family:"Cambria",serif;mso-ascii-theme-font:
major-latin;mso-hansi-theme-font:major-latin"><span style="font-family: Calibri; font-size: 12px;"> </span><o:p></o:p></span></p><p class="MsoNoSpacing"><span style="font-family: Calibri; font-size: 12px;"> </span></p><p class="MsoNoSpacing"><span style="font-family:"Cambria",serif;mso-ascii-theme-font:
major-latin;mso-hansi-theme-font:major-latin"><span style="font-family: Calibri; font-size: 12px;">Greetings!</span><o:p></o:p></span></p><p class="MsoNoSpacing"><span style="font-family: Calibri; font-size: 12px;"> </span></p><p class="MsoNoSpacing"><span style="font-family:"Cambria",serif;mso-ascii-theme-font:
major-latin;mso-hansi-theme-font:major-latin"><span style="font-family: Calibri; font-size: 12px;">We apologize for the inconvenient
that this may have cause you.</span><o:p></o:p></span></p><p class="MsoNoSpacing"><span style="font-family: Calibri; font-size: 12px;"> </span></p><p class="MsoNoSpacing"><span style="font-family: Calibri; font-size: 12px;"> </span></p><p class="MsoNoSpacing"><span style="font-family:"Cambria",serif;mso-ascii-theme-font:
major-latin;mso-hansi-theme-font:major-latin"><span style="font-family: Calibri; font-size: 12px;">As of now we are still
coordinating this request to our support team, we are waiting for the feedback
from our support team.</span><o:p></o:p></span></p><p class="MsoNoSpacing"><span style="font-family: Calibri; font-size: 12px;"> </span></p><p class="MsoNoSpacing"><span style="font-family:"Cambria",serif;mso-ascii-theme-font:
major-latin;mso-hansi-theme-font:major-latin"><span style="font-family: Calibri; font-size: 12px;">We will update you once we received
a feedback.</span><o:p></o:p></span></p><p class="MsoNoSpacing"><span style="font-family: Calibri; font-size: 12px;"> </span></p><p class="MsoNoSpacing"><span style="font-family: Calibri; font-size: 12px;"> </span></p><p><span style="font-family: Calibri; font-size: 12px;">

**Very** bad practice to style inline - especially on this scale. Use an external stylesheet. — Jack Bashford, May 29 '19 at 13:12
First part of the code is where we have issue, as you can see the second part is displayed without any additional line breaks. — Manoj Reddy, May 29 '19 at 13:15
@ShireeshaParampalli actually this html will be sent over email. This is how it generates in the code. — Manoj Reddy, May 29 '19 at 13:16
TL:DR from the duplicate, you can reset the font-size or line-height to make the anonymous block have 0 height (font-size:0 on body should do it) — Temani Afif, May 29 '19 at 13:17
@TemaniAfif duplicate which you marked doesn't answer my question, if you notice my html, first part of html is fine, but not the second part. Though both are same . — Manoj Reddy, May 29 '19 at 13:28
you need to reset font-size ... in the first html code you are having extra tag where inside you have empty space and you are setting font-size to them. So no both code aren't the same — Temani Afif, May 29 '19 at 13:34

Ismail Vittal · Answer 1 · 2019-05-29T14:05:51.243

0

In the first set of HTML I can see blank p tags with  

<p class="MsoNoSpacing"><span style="font-family: Calibri; font-size: 12px;">&nbsp;</span></p>

Whereas in the second set of HTML the   is not rendered.

Removing   from first HTML results in same output.

Hope this helps to debug further.

edited May 29 '19 at 14:05

answered May 29 '19 at 14:01

Ismail Vittal

1,077
9
12

Yes, I figured out that. But can we handle it by any encoding or any css change ? – Manoj Reddy May 29 '19 at 14:05
This CSS solution is only based on your current html structure. `p.MsoNoSpacing:nth-child(3), p.MsoNoSpacing:nth-child(2), p.MsoNoSpacing:nth-child(5), p.MsoNoSpacing:nth-child(7), p.MsoNoSpacing:nth-child(8), p.MsoNoSpacing:nth-child(10) { display: none; }` – Ismail Vittal May 29 '19 at 14:18
Also bear in mind the nth-child CSS property doesnt support in most of the email clients. [CSS nth-child in email clients](https://templates.mailchimp.com/resources/email-client-css-support/) – Ismail Vittal May 29 '19 at 14:22

Space considering as new line in html

1 Answers1