How to achieve text shrinking instead of overflowing or container resizing?
I want to be able to have a max font size, say, 2rem, in a container, and for the font size to automatically shrink once it reaches the padding limit of the container instead of overflowing or changing the size of the container. This is in the context of a template for, say, a group of titles or users. Is there a way to do this that's also compatible with all browsers (except IE probably)?
4 Replies
This won't give you your full desired effect but why not just put a clamp on your font-sizes?
clamp(1rem, 1rem + 0.5vw, 2rem)Well, the thing is that this is a more responsive design approach, which I had already kinda tried because I had clamped my font. I'm looking for something more responsive within an element rather than page-wise. I'll try to play around with clamps and such some more for now though. Thanks though!!
if you want to clamp it to the element size, you could set
container-type: inline-size on the parent element
and use the cqi units instead of vw in the childs
Oh wow!! This is a method I didn't know about. However, once I tried it, it seems as though the text still overflows when it becomes too long, and never quite reaches 2rem, which is my desired value (though I could set the preferred value to 2rem - something perhaps). Might have to use a container query probably (which I just looked more into thanks to this!!) and/or a <wbr> ?
Or maybe I'm just not understanding this at all!!