I am attempting to make my outer table/td clip the inner SPAN when the content of the span exceeds the height of the outer table, all while maintaining vertical and center alignment.
Instead of the current layout:
https://i.sstatic.net/s33q7.png
I want to achieve this design:
https://i.sstatic.net/vh4ah.png
You can view a live demo at: 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>