html - 如何在没有 JavaScript 的情况下根据其子项之一设置 的高度？

Question

我有一个表格，其中包含固定宽度的多个列中可变数量的文本。一些列将允许其中的文本增长，直到全部显示出来，但其他列将限制在该高度，即使它们的文本最终被隐藏。没有任何 JavaScript 有没有办法做到这一点？

一些注意事项:

• 我不知道文本是什么，所以我无法为行本身设置具体的高度。
• 之前我把不能增长的文本框的高度设置得很小，然后在页面加载后找到它们，将它们的行高设置为一个具体的数字，并设置它们的高度继承。不过那太慢了，因为我会有很多行。

这是一张表的外壳，它显示了我的目的。我需要知道如何编写类(class)。

    <table>
        <tr class="rowCanGrow">
            <td class="canGrowTD" style="width:90px;">
                <div class = "canGrow">Should see all of this text.</div>
            </td>
            <td class = "cantGrowTD" style="width:80px;">
                <div class = "cantGrow">Should see all of this text.</div>
            </td>
            <td class="canGrowTD" style="width:100px;">
                <div class = "canGrow">(Controller) Should see all of this text.Should see all of this text.</div>
            </td>
            <td class = "cantGrowTD" style="width:100px;">
                <div class = "cantGrow">This one should get cut off mid sentence, and definitely shouldn't be allowed to grow as far down as it wants to grow.</div>
            </td>
        </tr>
    </table>

编辑 添加了一个空格，以便单词可以正确分隔并且宽度保持一致，因为它与我要解决的问题无关。

编辑 2 清理一些东西。所有单元格都应具有固定宽度(添加内联样式)并注意我无法在任何地方设置具体高度，因为在文本呈现并设置它之前我不知道那是什么。

编辑 3 这是想要的结果:

Answer 1

可以设置给你div高度和宽度为 100%，overflow: hidden;隐藏滚动条。其次，您应该设置 <td> 的任意高度.所以，基本上 div 的高度是包含单元格的高度，文本不能增大 div，无论窗口大小如何，单元格/行都保持相同的高度。

td.canGrowTD > div {
  width: 100%; height: 100%; overflow:hidden;
}

td.canGrowTD {
  height: 20px;
}

<table>
        <tr class="rowCanGrow">
            <td class="canGrowTD">
                <div class = "canGrow">Should see all of this text.</div>
            </td>
            <td class = "canGrowTD">
                <div class = "cantGrow">Should see all of this text.</div>
            </td>
            <td class="canGrowTD">
                <div class = "canGrow">(Controller)Should see all of this text.Should see all of this text.</div>
            </td>
            <td class = "canGrowTD">
                <div class = "cantGrow">This one should get cut off mid sentence, and definitely shouldn't be allowed to grow as far down as it wants to grow.</div>
            </td>
        </tr>
    </table>