Kevin Powell - Community•8mo ago

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

vince•8mo ago

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)

Highly Nonexistent•8mo ago

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!!

MarkBoots•8mo ago

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

<div class="parent">
  <div class="child">Text</div>
</div>

<div class="parent">
  <div class="child">Text</div>
</div>

.parent {
  container-type: inline-size;
  > .child {
    font-size: clamp(1rem, 1rem + 5cqi, 2rem)
  }
}

.parent {
  container-type: inline-size;
  > .child {
    font-size: clamp(1rem, 1rem + 5cqi, 2rem)
  }
}

Highly Nonexistent•8mo ago

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!!

Gaming

Programming

How to achieve text shrinking instead of overflowing or container resizing?