Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Text breaks on the last word

See original GitHub issue

Hello love this library and I’m trying to use it as a feature for our company, but I’m having some issues with the text, as sometimes it breaks on the last word.

Steps To Reproduce

Here’s a simplified React code I’ve put together that reproduces the issue.

import { useRef } from 'react';
import {toPng} from "html-to-image";

function App() {
  const print = useRef(null);

 function exportAsImage() {
    toPng(print.current).then(function (dataUrl) {
      var img = new Image();
      img.src = dataUrl;
    }).catch(function (error) {
        console.error('oops, something went wrong!', error);

  return (
    <div style={{width: 400}}>
      <div ref={print} style={{ display: 'flex', justifyContent: "space-between", alignItems: "center"}}>
        <span style={{fontWeight: "bold", paddingBottom: 30}}>Some-Test not left</span>
        <span style={{fontWeight: "bold", paddingBottom: 30}}>Some-Test not right</span>

      <br />
      <button onClick={exportAsImage}>click</button>
      <div style={{marginTop: 30}}>Result img: </div>

export default App;

Output image

Screenshot 2021-05-18 at 11 54 27 AM

Additional Context

Seems to happen only when I’m using flexbox, display: inline-block or when wrapping the text with a div or span tag. The line break goes away when I add a fixed width with some extra space to the span.

Screenshot 2021-05-18 at 11 54 27 AM


  • html-to-image: ^1.6.2
  • OS: macOS Big Sur v11.2
  • Browser: Chrome 90.0.4430.212, but was able to reproduce it on other browsers like Safari and Firefox.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:11
  • Comments:9 (6 by maintainers)

github_iconTop GitHub Comments

dima-horrorcommented, Apr 19, 2022

Hi. I think the problem mainly referenced to different font-sizes in browser / in rendered image.

On render all nodes are copying to SVG with their css computed styles. So, blocks has “fixed” width (by text content), that was calculated by browser.

Then, when block is copying to svg it also has the same fixed width.

But text node coping has some bug. Font-size are rendering differently in browser / in svg. The browser rounds the font size down to floor, and the SVG is drawn “as is”.

So in this cases text already will not fit in the “fixed” width of block.

With my team we figured out some solution for this. It’s a beat ugly, but working.

Before coping font-size property we reduce it by 0.1 pixel.

xdubxcommented, Apr 13, 2022

get the same problem as well. I solved it with a space replace to &nbsp; display flex is the problem. And it applys to all html tags.

text.replace(/ /g, "&nbsp;");
Read more comments on GitHub >

github_iconTop Results From Across the Web

css - Prevent line break between last word of an element and ...
The solution I could come up with is creating some sort of fix, wrapping text with the badge in a span and using...
Read more >
Line and page breaks - Microsoft Support
Always force a page break before a paragraph · Select the paragraph that you want to follow the page break. · On the...
Read more >
word-break - CSS: Cascading Style Sheets - MDN Web Docs
The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.
Read more >
How to force a line break before the last word of a line reach ...
I'm printing a sliding text by adding each letter after a short period of time. My problem is that when the text multilines,...
Read more >
word-break - CSS-Tricks
break -all : any word/letter can break onto the next line. keep-all : for Chinese, Japanese and Korean text words are not broken....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found