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: 595

Filed under:
|
|

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

Related posts about css

Related posts about vertical-alignment