Вертикальное центрирование и переполнение 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 .