Vertikale Zentrierung und Überlauf im Excel-Stil in CSS?

Question

Gibt es eine Möglichkeit, eine vertikale Zentrierung einer variablen Größe mehrzeiligen Inhalt innerhalb einer festen Größe div, mit versteckten Überlauf durchführen?

Das Ziel wäre, das zu reproduzieren, was man in Excel-Zellen sehen kann: Wenn der Inhalt in den Container passt, sollte er vertikal zentriert sein, wenn er größer ist, sollten die Teile, die überlaufen, ausgeblendet werden (und der Inhalt weiterhin vertikal ausgerichtet sein), wie in einer Excel-Zelle, deren Nachbarn nicht leer sind.

Ich weiß, wie man mit CSS vertikal zentriert, ich weiß, wie man den Überlauf ausblendet, wenn der Inhalt nicht vertikal zentriert ist, aber ich habe keine Ahnung, wie man beides gleichzeitig macht... Ist Javascript die einzige Lösung?

Der Trick ist, dass CSS-Positionierungsansätze nicht mit Inhalten variabler Größe funktionieren (mein Inhalt ist dynamischer Text), und wenn Sie die display:table-cell wird die CSS-Überlaufsteuerung effektiv deaktiviert (und der Container wächst, um den Inhalt aufzunehmen).

Answer 1

Dies sollte alle Zellen 65px hoch, und machen die Zellen "Text zeigen in der Mitte. Wenn es zu viel Text ist, verschwindet der Text unten.
Ich glaube, das ist es, was Sie wollen?

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>

Sie können es ausprobieren an JSFiddle .