URL Link overflowing in Outlook Email Client

[Vidhi]

Hi everyone, 

Happy Friday!

I am just trying to solve the problem of displaying links in Outlook in a nice wrapped-up way but my code is somehow not working for the Outlook email client. It is working its trick for other email clients.

<p><span style="overflow-wrap: break-word; word-wrap: break-word;">If the button above doesn&rsquo;t work, paste this link into your browser: <a href="https://au01web.zoom.us/w/63916266746?tk=qeHmhm9-PCCdAK0ab3_IQKMDsNpc_Za7As6YOr-H5gw.DQMAAAAO4bTU-hpmYWtlZGR3ZGxpUUtSbS16S2dFamVFRVFHUQAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&amp;pwd=S3JhdC9DbzJSeVFMQ3g1VURSZk9UZz09" target="_blank" style="text-decoration: underline; color: #002855;">https://au01web.zoom.us/w/63916266746?tk=qeHmhm9-PCCdAK0ab3_IQKMDsNpc_Za7As6YOr-H5gw.DQMAAAAO4bTU-hpmYWtlZGR3ZGxpUUtSbS16S2dFamVFRVFHUQAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&amp;pwd=S3JhdC9DbzJSeVFMQ3g1VURSZk9UZz09</a></span></p>
<br />
<p><span style="overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word;">To keep this webinar secure, please don&rsquo;t share this link publicly.</span></p>
<br />

 Any suggestions to resolve this issue.

Kind Regards,

Vidhi

[SanfordWhiteman]

Why show the entire link in the text?

[Dave_Roberts · Accepted solution]

You might trying moving the inline CSS from the <span> to the <a> where you'd actually need the "words" to break. Im not sure if the <a> will inherit the properties of a parent <span> for wrapping text in Outlook or not?

As an alternative, you could try just using the text "Click Here" (or something like that) inside the <a> element (as linked text) and then separately below the link include the string to copy/paste, or choose one or the other?

I'd think if the button link didn't work for a user that just adding a string to copy/paste would work better than including a redundant link around the string (which didn't work on the button) in the first place?

You might also consider trying to use the string inside different parent elements like:

<p style="overflow-wrap: break-word; word-wrap: break-word;">
If the button above doesn&rsquo;t work, paste this link into your browser: <br>
<span style="text-decoration: underline; color: #002855;">https://au01web.zoom.us/w/63916266746?tk=qeHmhm9-PCCdAK0ab3_IQKMDsNpc_Za7As6YOr-H5gw.DQMAAAAO4bTU-hpmYWtlZGR3ZGxpUUtSbS16S2dFamVFRVFHUQAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&amp;pwd=S3JhdC9DbzJSeVFMQ3g1VURSZk9UZz09</span>
</p>

^ no <a> element, just text inside a paragraph with a colored span around the link string

or

<div style="overflow-wrap: break-word; word-wrap: break-word;">
If the button above doesn&rsquo;t work, paste this link into your browser: <br>
<span style="text-decoration: underline; color: #002855;">https://au01web.zoom.us/w/63916266746?tk=qeHmhm9-PCCdAK0ab3_IQKMDsNpc_Za7As6YOr-H5gw.DQMAAAAO4bTU-hpmYWtlZGR3ZGxpUUtSbS16S2dFamVFRVFHUQAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&amp;pwd=S3JhdC9DbzJSeVFMQ3g1VURSZk9UZz09</span>
</div>

 ^ same as above, but using a <div> instead of a <p> as the parent
or

<p>If the button above doesn&rsquo;t work, paste this link into your browser:</p>

<div style="overflow-wrap: break-word; word-wrap: break-word; text-decoration: underline; color: #002855;">
https://au01web.zoom.us/w/63916266746?tk=qeHmhm9-PCCdAK0ab3_IQKMDsNpc_Za7As6YOr-H5gw.DQMAAAAO4bTU-hpmYWtlZGR3ZGxpUUtSbS16S2dFamVFRVFHUQAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&amp;pwd=S3JhdC9DbzJSeVFMQ3g1VURSZk9UZz09
</div>

^ separate a <p> from the link text using different parent elements.

Without testing any of these, I'd guess that the closer you get to having the inline style directly wrap the string, the closer you're chances of success. Likewise, the more nested the elements, the less likely it's behave the way you'd expect in email -- specifically Outlook.

Let me know if any of these solutions worked for you?

[Vidhi]

Hi @SanfordWhiteman & @Dave_Roberts ,

Thank you so much for your solutions and input. 

Actually, we were trying to replicate the Zoom format of sending responses to recipients on registration. However, we have now changed our email format and decided not to show the full URL in the email.

Usually, we use the <div> tag but for this particular module in our template, the code wasn't added to handle the overflow. And yes, you're right even after adding code, the behavior is not as expected in the Outlook email client.

Kind Regards,

Vidhi