TextBlock on Plane, Cannot show all text? Dont understand why

And this code, produces the screenshot below???
The difference here is that I have made the width of the texture fixed at 30, and changed the font size to 120 to make the text fit inside the texture.

I have absolutely no idea how that make sense.

var makeTextPlane = function(text, color, size) 
    {
      // size is an arbitrary multiplier that scales the entire model. Useful for controlling
      //   the actual visual experience of fog
      
      // textSizer is a div with { width: fit-content }
      nodes.textSizer.text(text);
      
      // This calculation seems to give the right width to convert from the div width to the 3d space width
      let textLength = 3 * size;//(nodes.textSizer.width()/size)*2;


      let textureWidth = textLength;
      let textureHeight = size * 2;

      let plane = BABYLON.MeshBuilder.CreatePlane("plane", {"height": textureHeight, "width": textureWidth}, scene);
      
      var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane);//),{"height": 10, "width": 1000});

      var text1 = new BABYLON.GUI.TextBlock();
      text1.text = text;
      // text1.resizeToFit = true;
      // text1.background ="yellow";
    text1.outlineColor = "white";
    text1.outlineWidth = size;
      text1.color = "white";
  text1.fontSize = 12*size;
      text1.fontFamily = "Courier Prime";
    // text1.fontWeight = "bold";
    // text1.width = textureWidth;
    // text1.height = textureHeight;
      // text1.resizeToFit = true;
      advancedTexture.addControl(text1);  

      // advancedTexture.rootContainer.scaleX = window.devicePixelRatio;
      // advancedTexture.rootContainer.scaleY = window.devicePixelRatio;

    // plane.lookAt(camera.position);
      return plane;
     };