How to set element height for a fixed number of lines of text
You can use the webkit property line-clamp
.container {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
It doesn't work on all browsers, but hopefully it will one day.
Use rem
:
.container {
height: 3rem; /* 1rem for each visible line */
overflow: hidden;
}
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
you can set the line height of a text and with it knows the exact height of each row and set desired height of your container, simply doing this:
.container {
line-height:25px;
height:75px;
overflow:hidden;
}
Now everything works rightly :)