Вертикально-центрирование и переполнение Excel-стиля в CSS?

Question

Есть ли способ выполнить вертикальное центрирование многострочного контента переменного размера в div с фиксированным размером со скрытым переполнением?

Цель состоит в том, чтобы воспроизвести то, что вы можете видеть в ячейках Excel: когда содержимое соответствует контейнеру, оно должно быть вертикально центрировано, когда оно больше, части, которые переполняются, должны быть скрыты (а контент по-прежнему вертикально выровнен), как в ячейке Excel, чьи соседи не пусты.

Я знаю, как вертикально центрировать с помощью CSS, я знаю, как скрыть переполнение, когда контент не вертикально центрирован, но я не знаю, как сделать оба одновременно ... Является ли Javascript единственным ответом ?

Фокус в том, что подходы с позиционированием CSS не работают с содержимым с переменным размером (мой контент - это динамический текст), а когда вы используете display:table-cell, он эффективно отключает управление переполнением CSS (и контейнер растет для размещения контента) ,

Answer 1

Это должно сделать все ячейки 65 пикселей высотой и сделать текст ячейки посередине. Когда текст слишком большой, текст исчезает ниже.
Я считаю, что это то, что вы хотите?

CSS:

.row { 
    border: solid 1px blue; 
    display: block; 
    height: 65px; /* arbitrary value */ 
    overflow: hidden; 
    line-height: 65px; /* same as height */ 
} 

.cell { 
    border: solid 1px #CCCCCC; 
    display: inline-block; 
    vertical-align: middle; 
    height: 100%; 
} 

.cellContents { 
    display: inline-block; 
    max-height: 100%;/*would 100%; work?*/ 
    width: 100px; /* arbitrary value */ 
    overflow: hidden; 
    border: solid 1px red; /* just to see that it's centered */ 
    line-height: 100%; /* so it does not inherit the huge line-height, and we get more than one line of text per cell */ 
} 

HTML:

<div class="table"> 
    <div class="row"> 
     <span class="cell"><span class="cellContents">cell 1 1</span></span> 
     <span class="cell"><span class="cellContents">cell 1 2</span></span> 
     <span class="cell"><span class="cellContents">cell 1 3</span></span> 
    </div> 

    <div class="row"> 
     <span class="cell"><span class="cellContents">cell 2 1</span></span> 
     <span class="cell"><span class="cellContents">This should make all the cells 65px high, and make the cells' text show up in the middle. When it's too much text, the text disappears bellow.</span></span> 
     <span class="cell"><span class="cellContents">cell 2 3</span></span> 
     <span class="cell"><span class="cellContents">cell 2 4</span></span> 
    </div> 
</div> 

Вы можете попробовать его на JSFiddle.