英文:
Outlook desktop client not wrapping text to new lines for Thai emails
问题
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 wrap 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;"></td></tr><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;" ></td></tr></table><![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.
英文:
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"
>&nbsp;พลังงาน</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.
答案1
得分: 1
使用 <wbr>。这是一个可选的换行标记。
另外，如果你除了Outlook Windows桌面之外其他都满意，那么你可以在Outlook条件代码中包裹一个硬换行，以确保它只影响Outlook。例如：
<!--[if mso]><br><![endif]-->
英文:
Use <wbr>. It's an optional break.
Alternatively, if you are happy with all others except Outlook Windows desktop, then you can wrap a hard line-break in Outlook conditional code to ensure it only affects Outlook. E.g.:
<!--[if mso]><br><![endif]-->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论