What is the best way to do text cropping in js?

Question

css

You need to crop the text if it does not fit into the area. The user enters the text himself and the input changes the width from its content, so I would like to know how best to find out the size of the line, more precisely, so which one is faster?
1 way:

innerIFLength(this);
function innerIFLength(self) {
     if ( self.getTextWidth(text) > maxWidth ) {
          text = text.slice(0, -1);
          innerIFLength(self);
     }
}

getTextWidth(text) {
     let canvas = document.createElement("canvas"),
          context = canvas.getContext("2d");

          context.font="17px Roboto";

          return context.measureText(text).width;
}

Method 2:
To animate the input, use a div that is hidden, and you can do this:

innerIFLength(this);
function innerIFLength(self) {
     if ( self.resizeDiv.getBoundingClientRect().width > maxWidth ) {
     
          text = text.slice(0, -1);
          self.resizeDiv.innerText = text;
          innerIFLength(self);
     }
}

What's faster? And how can you make a normal benchmark?

Answer 1

`overflow: hidden;`
https://jsfiddle.net/dejcnuz0/2/

Answer 2

Well for tests there is https://jsperf.com/