Question

我可以限制表格单元格（<td>）的宽度 - 我只设置宽度，并将overflow设置为隐藏。但是，我无法限制表格单元格高度并保持自动换行。如果我删除自动换行，高度保持一致（没有任何力量，因为文本只是水平延续并被切断）。如果我添加自动换行，它似乎忽略了高度属性并垂直展开单元格。

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

Answer 1

Figured it out! (Except the answer it a little hokey and only works in CSS3). Using a psuedo after element, and a negative margin, we can trick the table cell into not expanding it's height:

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

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

Edit: It seems that -100% will stop the table cell from expanding equal to the height of the table. Thus -100% is not the optimal solution. We'll replace this with a extremely large negative pixel amount. This will fix very long sentences.

Answer 2

我只是为稍后阅读这篇文章的人发布“基本”/明显的解决方案。在表格单元格中放置一个div，并将宽度/高度设置为与单元格相同的大小。然后将div的overflow和overflow-y设置为hidden。您应该没有任何边距/填充/等问题，但如果需要，您可以将它们设置为零。

    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;
    }

Html表：单词中断和限制Td高度？

2 个答案: