Auto-size dynamic text to fill fixed size container?

Question

I need to display user entered text into a fixed size div. What i want is for the font size to be automatically adjusted so that the text fills the box as much as possible.So - If the div is 400px x 300px. If someone enters ABC then it's really big font. If they enter a paragraph, then it would be a tiny font.I'd probably want to start with a maximum font size - maybe 32px, and while the text is too big to fit the container, shrink the font size until it fits.

Answer 1

Hello!

After reading through your question, it seems that what you're asking is more JavaScript-related than CSS or HTML; It's not possible to do what you're asking with HTML, or CSS.

Below you'll see some JavaScript that should serve as a solution:

function isOverflowing(textWrapperDiv) {

let divOverflow = textWrapperDiv.style.overflow

if (!divOverflow || divOverflow === "visible") {

textWrapperDiv.style.overflow = "hidden"

}

let overflowStatus = textWrapperDiv.clientWidth < textWrapperDiv.scrollWidth || textWrapperDiv.clientHeight < textWrapperDiv.scrollHeight

textWrapperDiv.style.overflow = divOverflow

return overflowStatus

}

Note: Below, you'll want to change "YOUR-TEXT-WRAPPER-DIV-ID" to the id of the div that contains the text. If this is a different tag than div that's fine, div is just assumed for this example.

const div = document.getElementById("YOUR-TEXT-WRAPPER-DIV-ID")

const incrementionRate = 1

function changeFontByFill(textWrapperDiv) {

textWrapperDiv.style.fontSize = "1px"

let fitted = false

let lastSize

while (!fitted) {

if (isOverflowing(textWrapperDiv)) {

textWrapperDiv.style.fontSize = `${lastSize - incrementionRate}px`

fitted = true

}

else {

lastSize = parseFloat(textWrapperDiv.style.fontSize.slice(0, -2) + incrementionRate

textWrapperDiv.style.fontSize = `${lastSize}px`

}

}

}

adjustFontSize(div)

The above should adjust your element's (el) font-size to be just-before overflow. You'll need to have it execute in some way though, for this I'd encourage an event listener that runs changeFontByFill function if the user presses a "submit"/"save"/"update" button of some kind. This would look like:

window.addEventListener('click', function(){changeFontByFill(div)}, false);

Hopefully this helps! If you have any questions or concerns, please don't hesitate to respond or reach out.