Html表格:断字AND限制Td高度

Html Table: Word Break AND Limit Td Height?

本文关键字：限制 Td 高度 AND 断字 表格 Html      更新时间：2023-09-26

我可以限制表单元格（<td>）的宽度-我只设置宽度，并将溢出设置为隐藏。但是，我不能限制表格单元格的高度并保持换行。如果我去掉换行符，高度会保持一致（没有什么强制它，因为文本只是水平地继续并被截断）。如果我添加换行符，它似乎会忽略height属性并垂直展开单元格。

PLNKR

目标是设置一个固定的表格宽度和高度，然后进行文本换行（当到达单元格的水平端时，换行到下一行），但当它到达底部时，会被垂直截断。我目前的风格是：

    <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：这是一个内联块解决方案，但这是不可取的，因此不作为答案发布：http://plnkr.co/edit/qvA1wzkEdcrsA2Y9qWdV?p=preview

想明白了！（除了答案有点做作，只适用于CSS3）。使用元素后的psuedo和负裕度，我们可以诱使表格单元格不扩展其高度：

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

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

编辑：似乎-100%将阻止表格单元格扩展到与表格高度相等的高度。因此，-100%不是最佳解决方案。我们将用一个非常大的负像素量来代替它。这将修复很长的句子。

我只是为稍后阅读本文的人发布"基本"/显而易见的解决方案。在表格单元格中放入一个div，并将width/height设置为与单元格相同的大小。然后将div的overflow和overflow-y设置为隐藏。你不应该在边距/填充等方面有任何问题，但如果需要，你可以将它们设置为零。

    td{ 
        word-break:break-all;
        width: 80px;
        height: 40px; 
        border: 1px solid;
        border-collapse: collapse; 
        overflow: hidden; 
        background-color:yellow;
    }
    div{
      background-color:cyan;
        width: 80px;
        height: 40px; 
        overflow: hidden; 
        overflow-y: hidden;
    }
相关文章：