broken alignment for text with `textWrap: 'balance'` if text doesn't contain whitespace

[dimaMachina]

Hey @shuding, found some bug with textWrap: 'balance'! also this bug happens starting from v0.4.0 when textWrap: 'balance' was introduced

Bug report

Description / Observed Behavior

          <span tw="font-bold text-5xl" style={{ textWrap: 'balance', background: 'red' }}>
            {title}
          </span>

Expected Behavior

below text without textWrap: 'balance'

Actual

Reproduction

Create a shareable reproduction link for the issue using https://og-playground.vercel.app/?share=vZI9TsQwEIWvMpo61qYACRmWDokDING4sePJz-K1I2dCEkW5Bx0n4G4cgWQThITYBgka_2je8_vGmhGzYAkl3tjqGbjbK8wd9bAsIgsOOpG3zoEpRBGJvLhIU4W3ygN8cxzahqt8EBl5prj5Nuksbmrt1yNspuBZmOAsMPUsLvtZ_CloeHC0H8dT6THqWoJCo532GSlMwOjsqYih9XYpRLIKYZpW9xYIcB-OtIXvlvQVejdT_xL_PPcX8M9kf8f0_18K768vb2d7WPdr5THBUHMVfINyxK6yXKK8StMES6qKklHOk5SgJdMWKHPtGkqQjuFQPQz1MpDcnW7zO0tbd0dDFiXHlqYEWZtZUZJzoQvRWZw-AA

Additional Context

Satori: 0.9.1

⚠️ ⚠️ ⚠️ Note this happens only if there is no whitespace character

[joeporpeglia]

Adding wordBreak: 'break-word' prevents the text from clipping and fixes the layout issue. Not an ideal workaround, but maybe textWrap: 'balance' was only intended to work with break-word / break-all?

[eeberhart40]

This is still an issue

[kentcdodds]

Confirmed this is still an issue.