Search code examples
csszurb-foundationhtml-emailinky

Email - hidden vertical overflow in td

How can I make sure my td doesn't stretch vertically to fit content, but instead caps to a max-height and hides the overflowed text ?

I am using the Inky templating language, but I would accept otherwise a pure HTML-based solution ?

My goal is to make sure make sure the user content stay confined in the area reserved for it. In the below image you can see an example where the description section is stretched too much vertically

enter image description here

The target being something that mimics as close as possible the behavior on my website enter image description here (I don't absolutely need an ellipsis with ..., just hiding the overflow past 60px height would be enough)

My current Inky code relevant to this section, the content being the bottom section under the images

<row>
    <columns class="content">
        <row height="60" valign="middle">
            <columns class="position-column" valign="middle" height="60">
                <center>
                    <p class="position text-center" style="margin-bottom: 0;">
                        <%= model.job_description %>
                    </p>
                </center>
            </columns>
        </row>

The full rendered code after inky<->html translation is available here

Solution

  • The only way I could see doing this would be to fix the height and add overflow:hidden to the p tag.

    However overflow is not supported on Outlook, so this won't help here.