URL Link overflowing in Outlook Email Client | Community
Skip to main content
V
VidhiKh1
New Participant
April 28, 2023
Solved

URL Link overflowing in Outlook Email Client

  • April 28, 2023
  • 2 replies
  • 5255 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Dave_Roberts

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?

2 replies

Dave_Roberts
Dave_RobertsAccepted solution
New Participant
May 1, 2023

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?

V
VidhiKh1Author
New Participant
May 2, 2023

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 

    SanfordWhiteman
    SanfordWhiteman
    New Participant
    April 28, 2023

    Why show the entire link in the text?

      Terms & ConditionsAccessibility statement

      Loading footer...