Long url overlaps block in web-based clients

[Silverthan]

Hi there,

I have a problem with a long url that has to be displayed, and it overlaps my 600px block in some web-based clients only, forcing it to stretch.

Clients:

Yahoo! Mail (Chrome)
Yahoo! Mail (Edge)
Web.de (Edge)
Web.de (Chrome)
GMX.de (Edge)
GMX.de (Chrome)
AOL Mail (Edge) 
AOL Mail (Chrome) 

Screenshot: https://ibb.co/jybq2dj

I tried some break-all variations but none of them worked unfortunately.

Source code:

<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px; max-width: 600px; background-color: #ffffff; display: block; padding: 0; margin:0" class="w100p">
                    <tbody>
                        <tr>
                            <td align="center" valign="top" style="background-color: #ffffff; line-height: 20px; font-size: 1px;">
                                &nbsp;
                            </td>
                        </tr>
                        <tr>
                            <td align="center" valign="top" style="width:100%; background-color: #ffffff;" class="w100p">
                                <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px; max-width: 600px;">
                                    <tbody>
                                        <tr>
                                            <td align="center" valign="top" style="font-family: 'daxline', Helvetica, Arial, sans-serif; font-weight: 400; font-size:18px; line-height:24px; color:#012406; margin:0; padding:0 40px; text-align: left; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all;" class="p20 fs16 lh22">
                                                <span style="font-weight: 700">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span>
                                                <br><br>
                                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolores unde at, architecto eligendi explicabo qui eveniet ipsa recusandae possimus vel nesciunt numquam voluptatem, facilis fuga veritatis omnis tempore doloribus?
                                                <br><br>
                                                <a href="{{ forgot_password_link }}" style="color: #69A507; text-decoration: none; word-break: break-all;" target="_blank">https://www.website.com/forgot-password?p=6232e0aa7s34234dfsdfasd928f17&h=LdGBnA1MFdsdf43fr3sODvi8TG%2FqYUqCoU8%3D&k=6298acd25g5gdd12gh8698ac63fef5c2ed</a>
                                                <br><br>
                                                Blah Blah
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td align="center" valign="top" style="background-color: #ffffff; line-height: 20px; font-size: 1px;">
                                &nbsp;
                            </td>
                        </tr>
                    </tbody>
                </table>

Has anybody encountered something similar?

Thank you in advance for your help!

[Nicole-Hickman]

Can you insert a zero width non-joiner character in spots so that it is afforded the opportunity to break in certain spots? I do this in the references blocks (I work in a pharma agency) where the links are super long and must display.

[Silverthan]

Unfortunately this is a parameter filled from a json file which I do not control, so I'm hoping to find a solution in the html side of things :)

[nathankeenmelb]

Yahoo/AOL mostly support overflow (not sure about others--https://www.caniemail.com/features/css-overflow/), so in the td you could potentially add overflow:auto. To limit to just them you can add a class with a comment like so:

.foo{
  overflow:/* auto */;
}

(Via https://howtotarget.email/#2020-03-23-yahoo)

[Silverthan]

Unfortunately this didn't work either

[M-J-Robbins]

Looks like Yahoo adds

.msg-body td {
    word-break: normal;
}

Your code already has word-break: break-all; but Yahoo is removing that.

I'd say the best solution is to use Ghost tables, that way you avoid the td styles completely and you'll have more semantic code.

Another solution is to use a <th> element instead of the <td>, you may need to add some additional style resets here.

[M-J-Robbins]

Not sure of a solution for GMX/Web.de/Mail.com yet as they seem to remove all overflow-wrap, word-wrap, word-break styles

[husseinalhammad]

The line-break CSS property seems to be well supported, so you can use line-break: anywhere. It probably won't give you 100% coverage though.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
	<div style="max-width:400px;">
		<a href="https://example.com" style="color:#69A507; text-decoration:none; line-break:anywhere;" target="_blank">
https://www.website.com/forgot-password?p=6232e0aa7s34234dfsdfasd928f17&h=LdGBnA1MFdsdf43fr3sODvi8TG%2FqYUqCoU8%3D&k=6298acd25g5gdd12gh8698ac63fef5c2ed
		</a>  
	</div>
</body>
</html>