Use of word-wrap on long data placeholders with the Gmail App on Android

[jamesmacwhite]

Interesting observation I just came across with the Gmail App on Android 4.3

When placeholders for pulling data are long I generally use word-break:break-all; (Proprietary Microsoft implementation) and word-wrap:break-word;along withtable-layout:fixed; on the containing table of the text. This prevents the layout being stretched during development.

However it appears this actually seriously messes up on the Gmail app in this case:

Android 4.3 320 x 480 QVGA, Gmail 4.9 App

• The original placeholder is: ${Recipient.contact.firstname[0]!""}
• It gets converted to contact.firstname during a test email send
• Finally it well end up being a real name on the live send i.e. Hi James

In the Gmail app its decided to break up every letter, causing a vertical block. Its the word-wrap:break-word; property that's caused it.

It seems to be related to the device with as I was unable to reproduce the same issue on a larger device width running the same version of the Gmail app.

[jamesmacwhite]

A workaround would be not use word breaking CSS properties and instead set a fixed width, and then set back to 100% in responsive. This should prevent the table layout getting stretched when the original value of the placeholder is in the template (before getting converted)

[jamesmacwhite]

Closing this issue. With the following recommendation:

Avoid using word wrap properties and consider setting fixed widths if necessary. Word wrapping should be classed as debug only in most cases.