Обрезать дочерний SPAN, когда он превышает высоту родительского TD / TABLE

Question

Я пытаюсь, чтобы мой внешний table / td обрезал внутреннюю часть SPAN, когда содержимое span превышает высоту внешней таблицы, сохраняя выравнивание таблицы по вертикали и по центру.

Так что вместо этого:

Я бы получил это:

https://jsfiddle.net/xstatic/nksf9r71/14/

table {
  background: red;
  width: 300px;
  height: 100px;
  table-layout: fixed;
  word-wrap: break-word;
  border-collapse: collapse;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

table td {
  text-align: center;
  vertical-align: middle;
  height: inherit;
  overflow: hidden;
  border-collapse: collapse;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  max-height: 0px;
}

table td span {
  padding: 10px;
  overflow: hidden;
  height: inherit;
}

<table width="100%">
  <tr>
    <td><span>KITTENS DON'T ALWAYS GO TO HEAVEN</span></td>
  </tr>
</table>

Answer 1

Не уверен, какие еще требования у вас есть, но это даст вам результат, который вы ищете:

table td div {
  height: 2rem; /* Or whatever height you're after*/
}
table td div div {
  margin: -0.5rem;
  overflow:hidden;
}

Вам нужно будет добавить div обертки:

<tr><td><div><div>KITTENS DON'T ALWAYS GO TO HEAVEN</div></div></td></tr>

Однако это странный способ отображения ячейки таблицы. Это может вызвать проблемы в будущем.