0

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

Cyril Duchon-Doris
  • 12,964
  • 9
  • 77
  • 164

1 Answers1

1

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.

gj-wes
  • 912
  • 5
  • 9
  • Hey thanks, I actually ended up using a combo of `height="30"` on the td/tr div (for auto-centering) and the overflow hidden on the p tag as you suggested. That actually works on most clients in some way, except for some that completely ignore the overflow, and Outlook obviously. But apparently looking at the latest Outlook usage statistics, we agreed that that compromise would be enough (until we find a better/bulletproof solution). – Cyril Duchon-Doris Jan 04 '18 at 18:55