CODEWITHSUNDEEP
htmlemailckeditorhtml-email
Jimothey
Jimothey

Reputation: 2434

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

Upvotes: 0

Views: 17964

Answers (4)

RyanLock
RyanLock

Reputation: 1

In my experience, the CSS suggested in the previous answers won't work across all email clients. The most failsafe way to ensure that long strings (i.e. URL links) will wrap within a container element is to dynamically insert <br> elements into a display version of the string. If a user copy & pastes the URL string into an address bar, the line breaks are ignored.

The following code is in Ampscript, however the principles remain the same for other languages.

VAR @link, @linkDisplay, @linkLen, @linkSegmentNo, @linkSegmentLen, @linkSub
 
SET @linkLen = length(@link)
SET @linkSegmentLen = 52
SET @linkSegmentNo = FormatNumber(subtract(divide(@linkLen, @linkSegmentLen), 0.5), "N0", "en-AU")

FOR @i = 0 TO @linkSegmentNo DO
 SET @linkSub = Substring(@link, Add(Multiply(@i, @linkSegmentLen), 1), @linkSegmentLen)
 SET @linkDisplay= Concat(Concat(@linkBreak, @linkSub), "<br>")
NEXT @i

<a href="@linkURL">@linkDisplay</a>

Where the @link is the original string and @linkDisplay is the string with <br> elements added at a preset segment length (the number of characters to include before adding the line break).

Upvotes: 0

Max S.
Max S.

Reputation: 1461

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.

Upvotes: 0

Sam Tigle
Sam Tigle

Reputation: 403

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.

Upvotes: 0

srijan439
srijan439

Reputation: 450

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>

Upvotes: 1

Related Questions