Introduction
Here's a little code snippet you can use to make text inside an element as big as possible upon page load.
The code
<div class="expand-text-size">
I can't escape
</div>
import expand_text_size from '../lib/expand-text-size'
Array.from(document.getElementsByClassName('expand-text-size')).forEach((e) =>
expand_text_size(e)
)
export default function expand_text_size(e) {
let fontSize = 1
let changes = 0
let success = true
if (is_overflown()) e.style.fontSize = fontSize + 'px'
while (!is_overflown()) {
e.style.fontSize = fontSize + 'px'
fontSize += 10
changes++
failsafe()
if (!success) break
}
if (failure) revert_to_original_font_size()
function is_overflown() {
return e.scrollHeight > e.clientHeight || e.scrollWidth > e.clientWidth
}
function revert_to_original_font_size() {
success ? (fontSize -= 20) : (fontSize -= changes)
e.style.fontSize = fontSize + 'px'
}
function failure() {
return changes > 0
}
function failsafe() {
if (changes > 100) success = false
}
}