Fitext is a module which adapts the textual elements so that they are always contained in their parents without ever exceeding whatever the parent height and width. This lightweight library using no-one dependency. You can find a playable demo here.
$ npm install --save fitext$ yarn add fitextHTML :
<body>
<div class="fit-this-text">
<h1>Resize your window</h1>
<h2>Play with responsive 💡</h2>
<p>Insert a huge lorem ipsum text !</p>
</div>
</body>ES6 Modules :
import fitext from 'fitext'
fitext(true);No-module :
<script src='https://cdn.jsdelivr.net/npm/fitext@latest/dist/fitext.umd.js'></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
fitext(true);
});
</script>import fitext from 'fitext'
const EVENTS = ['DOMContentLoaded', 'resize']
EVENTS.forEach( e => window.addEventListener( e, fitext ) )
//OR
EVENTS.forEach( e => window.addEventListener( e, () => fitext(true, .25) ) )In the previous example, we listen to all event that can makes overflow texts from their containers, we prevent all break cases by executing the fitext function.
-
Minified version :
https://cdn.jsdelivr.net/npm/fitext@latest/dist/fitext.umd.jshttps://cdn.jsdelivr.net/npm/fitext@latest/dist/fitext.cjs.jshttps://cdn.jsdelivr.net/npm/fitext@latest/dist/fitext.esm.js
-
Original version :
https://cdn.jsdelivr.net/npm/fitext@latest/src/fitext.js
-
For specific files or enhanced configuration you can go here.
You can pass options in fitext. Allowed values are as follows :
| Name | Type | Default | Description |
|---|---|---|---|
wideable |
{ Boolean } |
false |
Enables the font-size enlarger. More |
stagger |
{ Float } |
1 |
Change stagger value. More |
This option enlarges the font size above the font size established before executing the `fitext` function.
The default behavior of this options limits the font-size to the font-size established before the function execution.
This option increments or decrements the current font-size by the number of pixels desired.
The smaller the value, the beautiful the change but may cause performance issues.
Good to know : Fitext is a very lightweight module : Less than 1 kB !
To increase fitext performances :
- Try to use relative font-size wherever possible.
- If you targeting a parent element all child are already taken in account, don't execute a
fitextfunction on them. - Try to avoid get too much containers into the fittable elements.
- Don't use a CSS font-size transition, prefer
staggeroption usage.
Pierre Darrieutort Core |
Jape Branding |
Mathieu Daix Design |
Abhishek Shende Klap Integration |
This project is under ISC License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent