Search code examples
htmlcsshtml-emailline-breaks

Return to next line in text using CSS?

I am having a css issue

I have a td, inside it, there is a text, the text as you can see is a code itself, but consider it as text only

my td now is bigger than the expected, because the text inside surpasses the width of the parent, for this I tried this white-space:initial property as you can see, I was expecting the text to never go out from its parent, break to next line inside text ( not words )

<table>
<tr>
    <td align="center" style="text-align:center;font-size: 12px;width:130px;white-space:initial;line-height:20px;max-width:130px;" width="130">
       <a class="link-txt" href="%%=RedirectTo(CONCAT(TreatAsContent(@delivery_service_link), '&utm_content=footer&utm_clickposition=delivery_service_copy'))=%%" style="text-decoration:none;color:#2e2e2e;font-family:Arial, Helvetica, sans-serif;line-height:20px;white-space:initial; text-align:center;">
                 %%=TreatAsContent(
                @delivery_service_copy )=%%</a>
    </td>
</tr>
</table>

end result is bad :

enter image description here

Expected result :

enter image description here

Any help would be much appreciated

This is for email development, that's why there is some inline styling

Thanks

Solution

  • Long text will push layouts out, as you have found.

    There is no one bit of code for all email environments, and it's not all CSS (some strip out the CSS or don't support it). Therefore, you'll see <wbr> which is an optional break to cover those scenarios.

    Here's the snippet:

    <style type="text/css"> <!-- Put in <head> -->
.wordwrap {
overflow-wrap: break-all; 
word-wrap: break-all; 
word-break: break-all
}
</style>

<p class="wordwrap" style="overflow-wrap: break-all; word-wrap: break-all; word-break: break-all;"><a href="http://www.this.com/is/too/long/for/mobiles">http://<wbr>www.this.com/<wbr>is/too/<wbr>long/for/<wbr>mobiles</a></p>

    This requires that the information has <wbr> inside at the points you want it to attempt a break, so if it's coming dynamically, and you can't edit the dynamic values, it won't work everywhere.