Vertical-centering and overflow Excel-style in CSS?
- by Eric Grange
Is there a way to perform a vertical centering of a variable-sized multi-line content within a fixed-size div, with hidden overflow?
The aim would be to reproduce what you can see in Excel cells: when the content fits the container, it should be vertically centered, when it is larger, the parts that overflow should be hidden (and the content still vertically aligned), like in an Excel cell whose neighbours aren't empty.
I know how to vertically center using CSS, I know how to hide overflow when the content isn't vertically centered, but I've no idea how to do both at the same time... Is Javascript the only answer?
The trick is that CSS positioning approaches don't work with variable-sized content (my content is dynamic text), and when you use display:table-cell, it effectively disables CSS overflow control (and the container grows to accomodate the content).
