• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
JavaScriptSource

JavaScriptSource

Search 5,000+ Free JavaScript Snippets

  • Home
  • Browse Snippets
    • Addon
    • Ajax
    • Buttons
    • Cookies
    • CSS
    • Featured
    • Forms
    • Games
    • Generators
    • Image Effects
    • Math Related
    • Miscellaneous
    • Multimedia
    • Navigation
    • Page Details
    • Passwords
    • Text Effects
    • Time & Date
    • User Details
Home / Text Effects / Scale a text to fit inside of an element

Scale a text to fit inside of an element

Scale a text to fit inside of an element

Let’s say that we want to scale a text inside a headline:

<div id="headline">Hello World</div>

First of all, we need to measure the width of element with its current font size and text content.

const measureWidth = function(text, font) {
    // Measure the width of given text for given font
    ...
};

// Query the element
const ele = document.getElementById('headline');

// Get the styles
const styles = window.getComputedStyle(ele);

// Get the font size and font style
const font = styles.font;
const fontSize = parseInt(styles.fontSize);

const measured = measureWidth(ele.textContent, font);

Now we can calculate how much the element is scaled by comparing the measured width and the full width:

const scale = ele.clientWidth / parseFloat(measured);

Finally, we set the font size as the element scales up to full width:

const scaleFontSize = Math.floor(scale * fontSize);
ele.style.fontSize = `${scaleFontSize}px`;

Source

https://htmldom.dev/scale-a-text-to-fit-inside-of-an-element/

Text Effects

Related Snippets:

  • Reverse Text Wizard
  • Get the direction of the text selection
  • Dynamically changing the text color based on background color contrast
  • Sticky Note Script

Primary Sidebar

Popular Posts

Story Generator

IP Grabber – get a users IP address with JavaScript

Simple Calendar

Remove Ads

Astrological Calculator

Copyright © 2025 JavaScriptSource.com

  • About
  • Privacy Policy
  • FAQ
  • Jobs For Developers