用JavaScript制作动态文本

如何解决用JavaScript制作动态文本

我需要制作适合窗口大小的动态文本，但我遇到了问题，重点是 例如xxx xxx xxx xxx xxx大于iii iii iii iii iii，但我不知道该怎么做， 这是我的代码

var p = document.getElementById('ptext'); 
var h1 = document.getElementById('h1text'); 
     
h1.setFont = function (font) { 
    var size = this.offsetWidth,font_size = size * font; 
    this.style.fontSize = font_size + '%'; 
    return this 
}; 
  
p.setFont = function (font) { 
  var size = this.offsetWidth,font_size = size * font; 
  this.style.fontSize = font_size + '%'; 
  return this 
}; 

let h1length = h1.innerText.length;
let plength = p.innerText.length;

let h1Size = 10 / h1length 
let pSize = 10 / plength  

h1.setFont(h1Size); 
p.setFont(pSize)

window.onresize = function () { 
    h1.setFont(h1Size); 
    p.setFont(pSize)
}