JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<p class="fit">kachibito.net </p>
</div>
<div>
<p class="fit">フィット</p>
</div>
<div>
<p class="fit">あ</p>
</div>
CSS
body{width:100%;}
div{width:300px;border:1px solid #999;}
p{margin:0;}
JavaScript
/*
* fitty v2.2.5 - Snugly resizes text to fit its parent container
* Copyright (c) 2017 Rik Schennink <[email protected]> (http://rikschennink.nl/)
*/
! function(e, t) {
if ("function" == typeof define && define.amd) define(["module", "exports"], t);
else if ("undefined" != typeof exports) t(module, exports);
else {
var n = {
exports: {}
};
t(n, n.exports), e.fitty = n.exports
}
}(this, function(e, t) {
"use strict";
Object.defineProperty(t, "__esModule", {
value: !0
});
var n = Object.assign || function(e) {
for (var t = 1; t < arguments.length; t++) {
var n = arguments[t];
for (var i in n) Object.prototype.hasOwnProperty.call(n, i) && (e[i] = n[i])
}
return e
};
t.
default = function(e) {
function t(e, t) {
var i = n({}, F, t),
r = e.map(function(e) {
var t = n({}, i, {
element: e
});
return S(t), T(t), {
element: e,
fit: b(t, o.DIRTY),
unsubscribe: w(t)
}
});
return l(), r
}
function i(e) {
var n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {};
return "string" == typeof e ? t(r(document.querySelectorAll(e)), n) : t([e], n)[0]
}
if (e) {
var r = function(e) {
return [].slice.call(e)
},
o = {
IDLE: 0,
DIRTY_CONTENT: 1,
DIRTY_LAYOUT: 2,
DIRTY: 3
},
u = [],
a = null,
l = "requestAnimationFrame" in e ? function() {
e.cancelAnimationFrame(a), a = e.requestAnimationFrame(function() {
s(u.filter(function(e) {
return e.dirty
}))
})
} : function() {},
c = function(e) {
return function() {
u.forEach(function(t) {
t.dirty = e
}), l()
}
},
s = function(e) {
...