javascript - HTML 表 : Word Break AND Limit Td Height?

Question

我可以限制表格单元格 ( <td>) 的宽度 - 我只需设置宽度，并将溢出设置为隐藏。但是，我无法限制表格单元格的高度并保持自动换行。如果我删除自动换行，高度保持一致(没有强制它，因为文本只是水平继续并被切断)。如果我添加自动换行，它似乎会忽略高度属性并垂直扩展单元格。

PLNKR

目标是设置固定的表格宽度和高度，然后进行文本换行(到达单元格的水平端时换行到下一行)，但到达底部时垂直 chop 。我目前的风格是这些:

    <style>
    table{
        border: 1px solid;
        table-layout: fixed; 
        border-collapse: collapse; 
    }

    tr{
        vertical-align: top;
    }

    td{ 
        word-break:break-all;
        width: 80px;
        height: 40px; 
        border: 1px solid;
        border-collapse: collapse; 
        overflow: hidden; 
    }
    </style>

编辑:这是一个额外的好处，但理想情况下，如果将图像放置在一个单元格中，那么它也会在垂直和水平方向上被切断，但这只是一个“不错的选择”，而不是 q 的真正组成部分.

编辑 2:这是一个内联 block 解决方案，但它是不可取的，因此未作为答案发布:http://plnkr.co/edit/qvA1wzkEdcrsA2Y9qWdV?p=preview

Answer 1

想通了! (除了答案有点矫揉造作并且只适用于 CSS3)。在元素之后使用伪元素和负边距，我们可以欺骗表格单元格不扩展它的高度:

td:after {
    content: '';
    display: block;
    margin-bottom: -10000px;
}

示例 plunker:http://plnkr.co/edit/frch27eCDoTBlDEVyUGB?p=preview

编辑: 似乎 -100% 将阻止表格单元格扩展到等于表格的高度。因此 -100% 不是最佳解决方案。我们将用非常大的负像素数量替换它。这将修正很长的句子。