0

I'm attempting to make a div with a defined height transition to a new height that is determined by its textual contents. Presumably, this requires factoring in the width of the window, because as the window width decreases, the text wraps more, becomes longer, and requires a larger height value.

#object {
    width: 100%;
    height: 50px;
    -webkit-transition: height 0.5s;
}
#object:hover {
    height: <!-- new height depends on length of inner text, but also
                 how small the window size is, because of wrapping -->
}

Is there an efficient way to accomplish this?

interpolack
  • 876
  • 10
  • 26

1 Answers1

0

Set the height to auto. The height of the div will adjust to the content inside the div.

mbrightenfield
  • 66
  • 5
  • Although I'm not sure that this works specifically, your answer prompted me to search for and discover this solution: http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto Thank you! – interpolack Oct 11 '13 at 05:11