'How to wrap long text in html emails

Hoping someone can help. I have some HTML email templates in my app, they work fine and look great in litmus. A lot of the content in the email is user generated via a UI/editor (CKeditor in this case). For the most part, this works fine unless a user adds a very long string or link which then causes either the long link/text to break out of the container or breaks the layout completely depending on the email client.

The editor wraps text in <p> tags which I can't easily access to add a fix. The parent <td> has styles that I'd hope prevent the issue (and do if the content wasn't wrapped in a <p>). The TD looks like this:

<td class="content-block" style="margin: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; padding: 0 0 20px; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; word-break: break-word;">{{- editorText -}}</td>

I have a <style> block at the top of the email template that tries to fix the issue:

<style media="all" type="text/css">
        @media only screen and (max-width: 640px) {
            ... some other styles ...

            .content-block p {
                display: inline-block !important;
                width: 560px !important;
                overflow-wrap: break-word !important; 
                word-wrap: break-word !important; 
                word-break: break-all !important; 
                word-break: break-word !important;
            }}
</style>

However this makes no difference and things still break with a long string of text.

Feels like I'm missing something obvious here... is there no way to fix other than adding inline styles to the <p> tag, which is going to be difficult to do.

Thanks

htmlemailckeditorhtml-email


Solution 1:[1]

I was facing the same problem. I tried this and it worked for me.

<td style = "word-break: normal; border-collapse : collapse !important;"> 
Lorem Ipsium 
</td>

Solution 2:[2]

The problem is, that not every Emailclient supports every html/css tags. Here you can see a List of supported HTML/CSS Tags (If the link isn't available: search for email template supported tags)

I would suggest to code the wrapping yourself, for example with inserting a <br> Tag after a certain amount of characters.

Solution 3:[3]

To be safe get the maximum width of the email and set it as such:

<td style="max-width: 502px; overflow: hidden;">

There's no one solution that's guaranteed to work on all email clients.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 srijan439
Solution 2 Sam Tigle
Solution 3

Related Questions