如何实现td不垂直拉伸，设置max-height并隐藏溢出文本（Inky/HTML）

我来帮你搞定这个问题！要让表格单元格（对应Inky里的<columns>）不被内容垂直拉伸，限制最大高度60px并隐藏超出部分，核心是调整CSS属性来绕过表格元素的默认布局特性。下面分Inky模板和纯HTML两种方案说明：

Inky模板修改方案 #

直接在你的<columns>标签上添加内联样式，关键是设置display: block（因为表格单元格默认的table-cell对max-height支持不佳）、max-height: 60px和overflow: hidden：

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

关键样式说明： #

• display: block：让表格单元格脱离默认的表格布局规则，这样max-height才能生效
• max-height: 60px：限制单元格的最大高度为60px
• overflow: hidden：自动隐藏超出60px高度的内容，不会出现滚动条或拉伸单元格

纯HTML方案 #

如果你直接修改渲染后的HTML，找到对应的<td>元素（对应Inky的<columns>），添加同样的内联样式即可：

<td class="position-column" valign="middle" style="max-height: 60px; overflow: hidden; display: block;">
  <center>
    <p class="position text-center" style="margin-bottom: 0;">
      <!-- 这里是你的用户内容 -->
    </p>
  </center>
</td>

额外注意事项 #

• 如果display: block影响了你的表格列宽布局，可以尝试换成display: inline-block，同样能让max-height生效
• 保留valign="middle"可以让内容在60px高度内垂直居中，不需要的话可以去掉
• 确保没有其他父元素的样式（比如height: auto或者强制拉伸的表格属性）覆盖这个设置

内容的提问来源于stack exchange，提问作者Cyril Duchon-Doris