Html 表：分词和限制 Td 高度？答案

【问题标题】：Html Table: Word Break AND Limit Td Height?Html 表：分词和限制 Td 高度？
【发布时间】：2015-11-19 21:34:12
【问题描述】：

我可以限制表格单元格 (<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

【问题讨论】：

CSS text-overflow in a table cell?的可能重复
不是——我阅读了我能找到的所有相关问题。这个问题与水平切断文本有关 - 我这样做没有问题。其实在我发在q的plunker里已经搞定了。
我不确定问题是否实际上是分词，而是表格单元格的高度是“内容所需的最小高度”。请参阅此问题/答案：How to set maximum height for table-cell?
@JonathanGawrych 据您所知，这是唯一的解决方案吗？我以前也这样解决过，但我真的很想保持干净（即单元格内没有 divs/spans/etc）。
@VSO 我知道你的意思。我讨厌不必要的 div。是的，我尝试了多次修改 css，但除了将显示设置为另一种类型（在此过程中破坏表格）之外，我找不到其他解决方案。

标签： javascript html css

【解决方案1】：

想通了！（除了答案有点做作，只适用于 CSS3）。使用伪元素后元素和负边距，我们可以欺骗表格单元格使其不扩展其高度：

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

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

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

【讨论】：

非常感谢，您为我减轻了很多痛苦。
我可以用极长的字符串将其断开，但我认为它与没有 div 的情况一样好。
@VSO 固定长句（只要句高不超过-margin量）

【解决方案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;
    }

【讨论】：