Vertical-centering and overflow Excel-style in CSS?
Posted
by Eric Grange
on Stack Overflow
See other posts from Stack Overflow
or by Eric Grange
Published on 2010-05-11T11:55:06Z
Indexed on
2010/05/11
12:04 UTC
Read the original article
Hit count: 591
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).
© Stack Overflow or respective owner