Hi all!

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;

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.