早在2017年筆者在開發前端網頁的時候就遇過兩個問題：如果要做一個網頁，這網頁滿版顯示，在任意螢幕尺寸下都要長的差不多，文字的大小要怎麼處理呢？還有就是在文字高度僅允許一行文字的空間下，要怎麼保證使用者輸入的文字不會因為太多而使得顯示出來的時候換行，或是換太多行了，而導致畫面跑版？
上述第一個問題比較簡單的作法就是利用CSS的@media規則，針對特定畫面尺寸去調整字型大小。這種作法雖然標準簡單，但會需要花費很多時間去調整。
第二個問題則是可以藉由限制字數的方式來搞定，但，這真的好嗎？如果原本就應該要有更多字數，卻因為要避免跑板而嚴格限制了字數，這樣的邏輯會很奇怪，倒不如去想要怎麼調整畫面的展示方式來容納更多字數。
在此筆者提出另一種解決方案，就是讓文字大小自動去適應容器的大小。
fit-html-text
fit-html-text是筆者開發的函式庫，它可以自動調整HTML容器中的文字大小，使它們正好符合容器的大小。
npmjs.com
使用方法
import { fitText } from "fit-html-text";
const element = document.getElementById("myElement");
fitText(element, {
fontMinSize: 8,
fontMaxSize: 72,
containerMaxWidth: 300,
containerMaxHeight: 300,
multipleLines: false,
});