0

I need to make dynamic text that will fit to the size of window and i have problem, the point is that for example xxx xxx xxx xxx xxx is bigger than iii iii iii iii iii and i dont know how to do that, here is my code

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)
}
DrocSid
  • 1
  • As it looks like the issue relates to resizing the window, try using vw/vh sizes instead - [CSS Units](https://www.w3schools.com/CSSref/css_units.asp). The font size will then grow/shrink as the window grows/shrinks. – ATD Oct 21 '20 at 08:38
  • Welcome! Perhaps you can look at [my answer to something similar](https://stackoverflow.com/a/64010150/5792509) (the second part) and make it work for your need (reduce font size instead of clipping). If it does help you - please up-vote it, thanks! – iAmOren Nov 09 '20 at 00:17

0 Answers0