I'm trying to limit an element to 2 lines of text and I wanted a fallback for -webkit-line-clamp
. This solution works when the system's default font size isn't the default:
line-height: 1.3em;
max-height: 2.6em;
overflow: hidden;
However, on Android, if I change the system's font size, the bottom of the second line is cut off:
The font-size is 16px, but with Android's scaling (1.3x), the computed styles are:
font-size: 20.8px;
line-height: 27.04px;
max-height: 41.6px;
So it looks like font-size
and line-height
are scaled, but not max-height
. Since max-height
is based on em
, I expected it to scale too. Is there a way to make this work?
from CSS: scale non-text elements based on the system's font size
No comments:
Post a Comment