Insert line breaks into HTML for Outlook

Asked

Viewed 95 times

0

Good night. I have a routine that sends emails to users with a simple text, but in outlook it does not recognize line breaks, making reading practically impractical.

The line breaking is done by a css. How can I generate this CSS for Outlook to interpret correctly?

Below the HTML

<html>
<head><title>PPM Notificação</title>
<style>
.RED {
  height: 20px;
  width: 20px;
  background-color: red;
}
.YELLOW {
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 20px solid yellow;
}
.GREEN {
  height: 20px;
  width: 20px;
  background-color: green;
  border-radius: 50%;
}
.multiline
{
   white-space: pre-wrap;
}
</style>

<!--[if mso]>
<v:shapetype id="triangle" path="m 1,21600 l10800,1,21600,21600 xe" xmlns:v="urn:schemas-microsoft-com:vml"/>
<![endif]-->


<!--[if mso]>
<v:shapetype id="hex" path="m 5200,21600 l1,10800,5200,1,16400,1,21600,10800,16400,21600 xe" xmlns:v="urn:schemas-microsoft-com:vml"/>
<![endif]-->


</head>
<body>
  <p><b> Status Report do Projeto:</b> [REQ.VP.KNTA_MASTER_PROJ_REF]</p>
  <p><b>Nº do Projeto:</b> [REQD.VP.NUMERO_PROJETO]</p>
  <p><b>Tipo de Cliente:</b> [REQD.VP.NOT_UNIDADE_MERCADO]</p>
  <p><b>Diretoria:</b> [REQD.VP.NOT_DIRETORIA]</p>
  <p><b>Portfolio:</b> [REQD.VP.NOT_PORTFOLIO]</p>
  <p><b>Programa:</b> [REQD.VP.NOT_PROGRAMA]</p>
  <p><b>Consultor do Projeto:</b> [REQ.VP.CONSULTOR_PROJETO]</p>
    <table width="80%" border="1"  cellspacing="0" cellpadding="10" leftmargin="10px" topmargin="0" marginheight="0" marginwidth="0" style="margin-left: 25px;border-collapse: collapse;"> 
  <tr>
        	<td style="text-decoration:none;" colspan="3"><div align="left"><!--[if mso]>[REQD.P.SAUDE_OCULTO]<![endif]--><b><code> </code>&nbsp;&nbsp;Saúde do Projeto</b></div> </td>
  </tr>
        <tr>
        	<td style="text-decoration:none;"><div align="left"><!--[if mso]>[REQD.P.SPO]<![endif]--><b><code> </code>&nbsp;&nbsp;Problemas</b> </td>
            <td style="text-decoration:none;"><div align="left"><!--[if mso]>[REQD.P.SCO]<![endif]--><b><code> </code>&nbsp;&nbsp;Cronograma</b> </td>
            <td style="text-decoration:none;"><div align="left"><!--[if mso]>[REQD.P.SFO]<![endif]--><b><code> </code>&nbsp;&nbsp;Custos</b> </td>
        </tr>
        <tr>
		<td colspan="3" style="white-space: pre-wrap;"><b>Laudo Executivo:</b> [REQ.VP.LAUDO_EXECUTIVO]</td>
        </tr>
        <tr>
        	<td><div colspan="3" style="white-space: pre-wrap;"><b>Patrocínio Esperado:</b> [REQ.VP.PATROCINIO_ESPERADO]</div></td>
        </tr>        	
            <tr>
            <td><div style="display:inline-block" class="[REQ.VP.PROJETO_CONTORNADO]"></div><b> Projeto Contornado: </b>[REQ.VP.PROJETO_CONTORNADO]</td>
            <td colspan="3"><div style="display:inline-block" class="[REQ.VP.DESCRICAO_CONTORNO]"></div> <b> Descrição do Contorno: </b>[REQ.VP.DESCRICAO_CONTORNO]</td>
            </table>  
  	<p>Para mais informações sobre o projeto por favor <a href="[AS.BASE_URL]/project/ViewProject.do?projectId=[REQ.P.KNTA_MASTER_PROJ_REF]">acesse o PPM</a> .</p>
    <p>Esta mensagem foi gerada automaticamente pelo PPM.</p>
<p></p>
</body>
</html>

.multiline { white-space: pre-wrap; }

  • Place the inline CSS in the element, something like: <div style="white-space: pre-wrap;">texto</div>

  • Thanks for the help, but it doesn’t solve the problem. It’s all formatted the same way.

  • 1

    If you put CSS outside the elements, they are ignored by email clients. All CSS you want to apply must be inline.

  • In the case of white-space, may be that Outlook does not support (not sure).

  • @Guilhermemontagnani I think it would complement the question if I added more information. Like, for example, the flawed code.

  • I inserted the encoding in the question mentioned above, but I believe the problem is that Outlook recognizes CSS, IE, I would need another way to do, what I do not know if it is possible.

Show 1 more comment
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.