
Security News
Meet Socket at Black Hat and DEF CON 2025 in Las Vegas
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
fancy-textfill
Advanced tools
Fast implementation for resizing text to fill its container. It computes the optimal font-size needed to match a text to specific width and height. It's also available as a jquery plugin.
It's really fast. See for yourself. :metal: Demo
npm install --save fancy-textfill
# or you can use yarn (yarn add fancy-textfill)
<!-- In case you're using it as a jquery plugin -->
<script src="jquery.min.js"></script>
<script src="https://unpkg.com/fancy-textfill/dist/fancy-text-fill.jQuery.js"></script>
<!-- Or you can use it without jquery, by using https://unpkg.com/fancy-textfill/dist/fancy-text-fill.js -->
<!-- Example setup -->
<style>
.container {
width: 200px;
height: 50px;
}
.myText {
display: block;
}
</style>
<div class="container">
<span class="myText">Hello darkness, my old friend.</span>
</div>
<div class="container">
<span class="myText">I've come to talk with you again.</span>
</div>
You can either use it on bare dom elements or on jquery objects.
// Without jquery
document.getElementsByClassName('myText')
.forEach(function (el) {
fancyTextFill.fillParentContainer(el, {
minFontSize: 6,
maxFontSize: 26
});
});
// With jquery
$('.myText').fancyTextFill({
minFontSize: 6,
maxFontSize: 26
});
You can also use it as a module. You can import it like so:
// Without jquery
import { fillParentContainer } from 'fancy-textfill';
// Or const { fillParentContainer } = require('fancy-textfill');
fillParentContainer(el, {
minFontSize: 6,
maxFontSize: 26
});
// as a jquery plugin
import 'fancy-textfill/es2015/jquery.plugin';
// Or require('fancy-textfill/es2015/jquery.plugin');
$('.myText').fancyTextFill({
minFontSize: 6,
maxFontSize: 26
});
Name | Description | Default value |
---|---|---|
minFontSize | Minimal font size (in pixels). The text will shrink up to this value. | 4 |
maxFontSize | Maximum font size (in pixels). The text will stretch up to this value. If it is null or a negative number (maxFontSize <= 0 ), the text will stretch to as big as the container can accommodate. | 40 |
maxWidth | Explicit width to resize. Defaults to the container's width. | null |
maxHeight | Explicit height to resize. Defaults to the container's height. | null |
multiline | Will only resize to the width restraint when set to false | true |
explicitLineHeight | When set to false , line-height s are assumed to be relative to the current font-size | false |
Performance! fancy-TextFill implements the same features while being way faster than the original jquery plugin.
BigText doesn't support multiple lines.
# Run chrome driver
chromedriver --port=4444 --url-base=wd/hub
# In another console
npm run build:dev
npm run test
This code is licensed under the MIT License. See file LICENSE for more details.
1.2.5
FAQs
Fast implementation for resizing text to fill its container.
The npm package fancy-textfill receives a total of 82 weekly downloads. As such, fancy-textfill popularity was classified as not popular.
We found that fancy-textfill demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.