使用interact.js调整大小时，如何使文本适合可调整大小的容器？

Question

我要完成的是，当我用文本调整容器的大小时，文本会根据需要增大或缩小。我可以在静态容器上进行此操作，但使用Interactive.js不能成功。

我尝试了几种不同的方法，但是我都无法上班。我试过使用视口单元，Jquery FitText和fitty。有些人通过将相应的js代码放在interactive.js代码之前获得了一些结果，但随后interactive.js代码无法正常工作。同样，情况相反。当文本拟合代码位于Interactive.js代码之后时，它什么也不做。

下面是仅带有Interactive.js的代码

command + option + shift + k

interact('.resize-drag')
  .draggable({
    onmove: window.dragMoveListener,
    restrict: {
      restriction: 'parent',
      elementRect: {
        top: 0,
        left: 0,
        bottom: 1,
        right: 1
      }
    },
  })
  .resizable({
    // resize from all edges and corners
    edges: {
      left: true,
      right: true,
      bottom: false,
      top: false
    },


    preserveAspectRatio: true,

    // keep the edges inside the parent
    restrictEdges: {
      outer: 'parent',
      endOnly: true,
    },

    // minimum size
    restrictSize: {
      min: {
        width: 100,
        height: 50
      },
    },

    inertia: false,
  })
  .on('resizemove', function(event) {
    var target = event.target,
      x = (parseFloat(target.getAttribute('data-x')) || 0),
      y = (parseFloat(target.getAttribute('data-y')) || 0);

    // update the element's style
    target.style.width = event.rect.width + 'px';
    target.style.height = event.rect.height + 'px';

    // translate when resizing from top or left edges
    x += event.deltaRect.left;
    y += event.deltaRect.top;

    target.style.webkitTransform = target.style.transform =
      'translate(' + x + 'px,' + y + 'px)';

    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  });

function dragMoveListener(event) {
  var target = event.target,
    // keep the dragged position in the data-x/data-y attributes
    x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
    y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

  // translate the element
  target.style.webkitTransform =
    target.style.transform =
    'translate(' + x + 'px, ' + y + 'px)';

  // update the posiion attributes
  target.setAttribute('data-x', x);
  target.setAttribute('data-y', y);
}

.resize-drag {
  color: black;
  font-size: 24px;
  font-family: sans-serif;
  padding: 1px;
  margin: 30px 20px;
  touch-action: none;
  position: absolute;
  width: 120px;
  box-sizing: border-box;
}

.resize-drag:hover {
  font-size: 24px;
  font-family: sans-serif;
  padding: 0px;
  margin: 30px 20px;
  touch-action: none;
  border: 1px dotted black;
  position: absolute;
  width: 120px;
  box-sizing: border-box;
}

.resize-container {
  display: inline-block;
  width: 100%;
  height: 240px;
  border: 1px solid black;
}