I'm building some Thai emails and having trouble to properly break text into multiple lines. While other email clients are doing a great job in breaking text, Outlook is not doing the same and I've tried various CSS techniques which did not help.Can someone please help with a way to word warp into multiple lines.
I don't wanna go with adding line breaks or <br/> as I might introduce unintended word breaks. Just seeing if outlook can do the same as other email clients.
<body style="background-color: #f4f4f4; word-spacing: normal">
<div style>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="shell-outlook" role="presentation" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div
class="shell"
style="background: #ffffff; background-color: #ffffff; margin: 0px auto; max-width: 600px"
>
<table
align="center"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="background: #ffffff; background-color: #ffffff; width: 100%"
>
<tbody>
<tr>
<td
style="direction: ltr; font-size: 0px; text-align: center; padding: 0"
align="center"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="container-outlook" style="vertical-align:top;width:600px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix container"
style="
font-size: 0px;
text-align: left;
direction: ltr;
display: inline-block;
vertical-align: top;
width: 100%;
padding: 0;
"
>
<table
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="vertical-align: top"
width="100%"
>
<tbody>
<tr>
<td
align="center"
class="hero-image"
style="font-size: 0px; padding: 0; word-break: break-word"
>
<table
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="border-collapse: collapse; border-spacing: 0px"
>
<tbody>
<tr>
<td style="width: 600px">
<img
height="auto"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Microsoft_Office_Outlook_%282018%E2%80%93present%29.svg/512px-Microsoft_Office_Outlook_%282018%E2%80%93present%29.svg.png?20230309112740"
style="
border: 0;
display: block;
outline: none;
text-decoration: none;
height: auto;
width: 100%;
font-size: 13px;
"
width="600"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
align="left"
class="title-text"
style="font-size: 0px; word-break: break-word; padding: 60px 56px 40px"
>
<div
style="
font-family: Arial;
font-size: 38px;
font-weight: 700;
text-align: left;
color: #7c7c7c;
line-height: 44px;
"
>
เปลี่ยนบ้านของคุณให้เป็น<font color="black" style="line-height: 44px"
> พลังงาน</font
>
</div>
</td>
</tr>
<tr>
<td
align="left"
class="default-text"
style="font-size: 0px; word-break: break-word; padding: 0 56px"
>
<div
style="
font-family: Arial;
font-size: 20px;
text-align: left;
color: #5c5e62;
line-height: 26px;
"
>
<div style="line-height: 26px"><br /></div>
<div style="line-height: 26px">
โซลูชันการจัดเก็บพลังงานในบ้านที่จ่ายพลังงานให้กับคุณ
และเมื่อรวมกับพลังงานแสงอาทิตย์จะช่วยให้คุณสร้างพลังงานที่คุณต้องการเพื่อช่วยจ่ายพลังงานให้กับบ้านและชาร์จอุปกรณ์ในบ้านของคุณได้อย่างยั่งยืน
</div>
<div style="line-height: 26px"><br /></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>
Sample Pictures: Diff btwn Outlooks and Apple mail pictures
I've followed this Stack thread and GoodEmailCode but didn't got any working solution. I was trying to see if outlook can wrap text to new line as other email clients. All browser clients are working as expected but only issue with Outlook desktop application on Windows. I even tried to build a template on Litmus but saw the issue there as well.
` in the Thai text.