Sunday, 25 July 2021

CSS: scale non-text elements based on the system's font size

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:

enter image description here

enter image description here

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