2

I am not finding a solution to get a long URL to wrap inside of a <table> <td> The URL wraps in other email clients I have test but not in Outlook 2013

Here is a small screen grab from the testing suite used to show the email in multiple clients. I need the URL to stay inside the same size table that is above the link and shown with the grey background.

It does work if I use word-break: break-all; But that will break other words in the email at any letter and will not look very professional to the person receiving the email of course

screenshot

<html><!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>The example site</title>

<style type="text/css">
    .ReadMsgBody {width: 100%; background-color: #ffffff;}
    .ExternalClass {width: 100%; background-color: #ffffff;}
    body     {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family: Georgia, Times, serif}
    table {border-collapse: collapse;}

    @media only screen and (max-width: 640px)  {
                    body[yahoo] .deviceWidth {width:440px!important; padding:0;}
                    body[yahoo] .center {text-align: center!important;}
            }

    @media only screen and (max-width: 479px) {
                    body[yahoo] .deviceWidth {width:280px!important; padding:0;}
                    body[yahoo] .center {text-align: center!important;}
            }

</style>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family: Georgia, Times, serif">

<!-- Wrapper -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px">

                                        <table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
                                <tr>
                                    <td class="center" bgcolor="#808080" style="font-size: 17px; color: #FF3C1F; font-weight: light; text-align: left; font-family: Georgia, Times, serif; line-height: 20px; vertical-align: middle; padding:10px 5px; font-style:italic;">
                                        The example site is
                                    </td>
                                </tr>
                            </table>

            <!-- One Column -->
            <table width="580"  class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#eeeeed" style="margin:0 auto; max-width: 580; width: 580;">

                <tr>
                    <td width="580" style="font-size: 13px; color: #2c2c2c; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 20px; vertical-align: top; padding:10px 8px 10px 8px; max-width: 580; width: 100%;" bgcolor="#FFFFFF">

<p>
Dear xyz,
</p>
<p>
This is an example of Example! 
</p>
<p>
To get started follow this link below : 
<br/>
https://www.example.com/jdjdjdjdjd/login?c=atkuylaKwpjdjdkjdkdkjlkjlskjsldkr5PG786876897jhjh7876878799hhkjh9rl5pUgvcRWTWsYsLpWz47vppA0oWFeRMYuF87qaIladUfB85eUEHhoaj3tpuLLP5kjlJLKJLSDKJDLKJSDLKSdLS
</p>
<p>
Thanks, <br/>
Example
</p>
                    </td>
                </tr>
            </table><!-- End One Column -->


<div style="height:15px;margin:0 auto;">&nbsp;</div><!-- spacer -->



        </td>
    </tr>
</table> <!-- End Wrapper -->
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
</body>
</html>
Improve this question
5
  • Can you use a URL Shortner service like bit.ly?
    – abhi
    Commented Apr 5, 2016 at 14:44
  • I could but solution is not desired in this project
    – Jason
    Commented Apr 5, 2016 at 15:23
  • Have you tried overflow-wrap: break-word;? I'm not a css expert but I believe it behaves better than word-break:break-all;
    – BrBarr
    Commented Apr 5, 2016 at 15:34
  • @BrBarr I have tried so many options I could not remember if I had tried that one yet. I did just try it with overflow-wrap: break-word; and overflow-wrap: break-all; and neither one made a difference.
    – Jason
    Commented Apr 5, 2016 at 15:40
  • My backup solution that I may have to go with is to create a hyperlinked phrase as in: <a href="{!IF(Receiving_User.Profile = "Community Login user",Community_Url , "")}">Follow This Link To Create Your Password</a>
    – Jason
    Commented Apr 5, 2016 at 15:57

1 Answer 1

Reset to default
0

This is what I am going to go with unless I can come up with a solution that allows me to keep the entire link in the email and visible as described in the original post.

The False results in the IF statements are for internal users who will be getting the emails and will not need the password reset link but will need a link to an article showing them how to access the Community.

<p>
{!IF(Receiving_User.Profile = "Community Login user","To get started set your password by going to:" , "")} 
<br/>
<a href="{!IF(Receiving_User.Profile = "Community Login user",Community_Url , "https://ns.salesforce.com/article")}">{!IF(Receiving_User.Profile = "Community Login user","Follow this link to Create Your Password" , "Follow this link to learn how to access the Community")}</a> 
</p>
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .