Rendering is not correct sometimes in React

[amitkumardh]

Expected Behavior

Current Behavior

Steps To Reproduce

  const dataUrl = await htmlToImage.toPng(DOMElement, {
    height: DOMElement.scrollHeight,
    width: DOMElement.clientWidth,
    backgroundColor: '#ffffff',
    quality: 1,
    pixelRatio: window.devicePixelRatio || 1,
    cacheBust: true,
  });

    const link = document.createElement('a');
    link.download = 'html-to-img.png';
    link.href = dataUrl;
    link.click();

Error Message & Stack Trace

```txt ```

Additional Context

Even though there is a full width provided, the text moves to the next line and sometimes it overlaps.

Your Environment

• html-to-image: 1.9.0
• OS: macOS Monterey
• Browser: Chrome

[biiibooo[bot]]

👋 @amitkumardh

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[biiibooo[bot]]

Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.

Thanks for being a part of the Antv community! 💪💯

[AhsanKhan7]

add a style={{ width: "100%" }} on div of text