Menu
Given some text that occupies about 10 rows, how can I resize its container to only show the first 3 rows and hide the others? Apparently this works, but I think it is not reliable:
.container { height: 7.5ex; /* 2.5ex for each visible line */ overflow: hidden; } Can I rely on the fact that height of one row = 2.5ex or is that just a coincidence in the browsers I am using to test?
351
Syntax: height: length|percentage|auto|initial|inherit; Property Values: height: auto; It is used to set height property to its default value.
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow.
line-height: 1.5 (without units) will mutiply the element's font size by 1.5 to compute the line height. line-height: 150% will take 150% of the element's computed font size to compute the line height, which is equivalent to multiply it by 1.5 .
If you are going to use this you should ensure the line-height is always 2.5ex
.container { line-height: 2.5ex; height: 7.5ex; /* 2.5ex for each visible line */ overflow: hidden; } Demo
190
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
