Как мне выровнять каждую строку текста до одинаковой ширины - и уместить в div?

Question

Я пытаюсь заставить эту скрипку работать правильно при изменении размера браузера.Но он мигает только с каждой секундой правильного рендеринга.Я не могу понять, почему, но я хотел бы, чтобы он адаптировался к div вместо использования размера шрифта в первой строке.

Вот скрипка

.divtext {
  display: table;
  font-family: impact;
  font-size: 4vw;
}

<div id="container">
  <div class="divtext">THIS IS JUST AN</div>
  <div class="divtext">EXAMPLE</div>
  <div class="divtext">TO SHOW YOU WHAT</div>
  <div class="divtext">I WANT</div>
</div>

function changeSize(){
    var els = document.getElementsByClassName("divtext"),
    refWidth = els[0].clientWidth,
    refFontSize = parseFloat(window.getComputedStyle(els[0],null).getPropertyValue("font-size")),
    i = 1;
    while(!!els[i]){
      els[i].style.fontSize = refFontSize * refWidth / els[i].clientWidth + "px";
      i++;
    }
}

$(window).resize(function(){
        changeSize();

});

... и изменяемого размера.

Answer 1

Я не уверен, что полностью понимаю, о чем вы спрашиваете, но удаление display: table избавляет от мерцания.

Answer 2

var els = document.getElementsByClassName("divtext")
var refWidth = els[0].clientWidth
var refFontSize = parseFloat(window.getComputedStyle(els[0], null).getPropertyValue("font-size"))
function changeSize() {
  i = 0
  while (!!els[i]) {  
    els[i].style.fontSize = refFontSize * refWidth / els[i].clientWidth + "px";
    i++;
  }
}
window.resize = changeSize

Answer 3

Вы можете улучшить событие window.resize, добавив Throttling.

https://jsfiddle.net/s8xL7d1p/

$(window).resize(function(){
  window.addEventListener('resize', function() {
      // only run if we're not throttled
    if (!throttled) {
      // actual callback action
      changeSize();
      // we're throttled!
      throttled = true;
      // set a timeout to un-throttle
      setTimeout(function() {
        throttled = false;
      }, delay);
    }  
  });  
});

см. http://bencentra.com/code/2015/02/27/optimizing-window-resize.html