Auto-size dynamic text to fill fixed size container

javascript

responsive-design

performance

best-practices

byAlex Kataev·Nov 2, 2024

To auto-size text to fit within a fixed-size container, apply JavaScript to dynamically adjust the font-size until the text fits perfectly in its container. Here's a basic demonstration of this principle:

#fixedContainer {
  max-width: 300px; max-height: 150px; overflow: hidden;
}

// Here begins the magic (or rather science) of dynamic text resizing
function scaleText(container) {
  // Get the container element. No, you don't need a wand for this
  let el = document.getElementById(container);

  // Goodbye love handles! Time to shed some font-size
  for (let fs = 100; el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth; fs--) {
    el.style.fontSize = `${fs}px`;
  }
}

// Run our magical script on the fixedContainer. Abracadabra!
scaleText('fixedContainer');

<div id="fixedContainer">Resize me! I've been to the gym 🏋️‍♀️</div>

This script kick-starts the font-size at 100px, then trims it down until the content fits snugly within its container—great for headlines or one-liners!

Scaling in depth: A broader perspective

The JavaScript snippet above fits a basic bill, but real-life situations might demand extra finesse. Let's delve deeper into the ins and outs of text scaling.

For jQuery fans: Textfill plugin

For jQuery enthusiasts, the Textfill plugin promises a convenient solution. It employs a do-while loop to nail the optimal font size to fit both the height and width of your container.

No JavaScript? No Problem: Fluid Typography

For those who fancy a CSS-only approach, fluid typography combines responsive units (vw, vh, vmin, vmax) with calc() to create size-adjusting formulas that respond to the viewport size.

Handling multiple containers

Have many containers? Don't worry, we've got you covered. Using classes allows you to apply your logic to an array of elements, providing a convenient bulk-apply option.

Overflow be gone!

To prevent spillage, always add overflow: hidden in your CSS. Further, use offsetHeight and offsetWidth for an apple to apple comparison of text dimensions with the container size.

Plugin treasure: jQuery-bigtext

Aside from jQuery textfill, there's a precious plugin called jQuery-bigtext that flexes its muscles by supporting complex content, line breaks, and even icons!

Maintaining code sanity

When crafting your custom JavaScript solution, remember to keep it simple. Write clean and concise code that other developers can read and modify without pulling their hair out.

The Full Monty: Ensuring responsive, adaptive scaling

Ensuring that your text fits inside the container is only half the battle won. We need to also focus on readability and usability.

Screen sizes: One size rarely fits all

Incorporating viewport units and media queries can help generate text sizes that adapt to the specific device's screen size, achieving true responsiveness.

Accessibility: Because everyone matters

Taking accessibility into account is crucial. By specifying maximum and minimum font sizes, you ensure that your text remains legible for all users, regardless of their visual ability.

Precision: The detail is in the detail

To make font resizing more accurate, you can calculate the inner dimensions of the elements before adjustment. This process enables precise fitting of the font within its container.

explain-codes / Javascript / Auto-size dynamic text to fill fixed size container

Linked

Two divs side by side - Fluid display



Changing image sizes proportionally using CSS



Height equal to dynamic width (CSS fluid layout)



Div width 100% minus fixed amount of pixels



Adjust width of input field to its input

