fluid-text

Make your text always fit both the width & height of a container.

Installation

You can either use the JS file directly in the browser or use it as a Node module with Browserify or Webpack.

For Node.js: npm install --save fluidtext

#text {
  height: 20px,
  width: 20px
}

<div id="text">
  This text will adjust to both the width and the height of its container.  Resize the window to try it.
</div>

var text     = document.querySelector('#text');
var adjuster = fluidText(text);
window.addEventListener('resize', function(){
  adjuster();
});

The fluidText function can take an object as the second argument, providing some options:

maxFontSize - The largest font size that the text will be expanded to. By default, this is the detected font size.
minFontSize - The smallest font size that the text will be shrunk to. The default is 0px.
multiplier - An integer that multiplies the resulting font size. The default is 1.
lineHeight - Manually override the detected line height. This should be an integer relative to the font size.
fontFamily - Force the font family.
fontWeight - Force the font weight.
fontStyle - Force the font style.
fontVariant - Force the font variant.
maxWidth - Force the container width value.
maxHeight - Force the container height value.

Currently, containers with padding aren't fully-supported. To get around this, you can provide maxHeight & maxWidth as option values.