Bug 267226 – Text sequence longer than 10240 are not rendered when text-overflow:ellipsis applied

• Component: Layout and Rendering
• Status: NEW

[Oleksii]

Created attachment 469338 [details]
Image showing the bug: first line of text has 10241 symbol and only ellipsis is rendered. Second line has one symbol fewer and rendered properly

My first bug filing here, please let me know if any additional details are needed.

I spotted this bug while working on a commercial project but was able to reproduce in isolation, on personal mac and iphone. The limit of text is very deterministic: the bug simply appears when you add just one more symbol to 10240 symbols sequence.

When a text with text-overflow: ellipsis; has more than 10240 symbols of any text, the text disappears, only ellipsis is visible. Does not happen in Chrome, have not yet been tested by me in Firefox.

Link to sandbox: https://codepen.io/alexeyraspopov/pen/qBvbQqy
Link to tweet that includes screenshot: https://twitter.com/alexeyraspopov/status/1743093372833690083 (also attached to the ticket)

Steps to reproduce:

html:

<div id="output_1"></div>
<div id="output_2"></div>

css:

div {
  overflow: hidden;
  max-width: 300px;
  white-space: nowrap;
  text-overflow:ellipsis;
}

js: (used purely for rendering a lot of text so I don’t need to paste it)

window.output_1.innerText = '0'.repeat(10241);
window.output_2.innerText = '0'.repeat(10240);

[Radar WebKit Bug Importer]

<rdar://problem/120647627>

[zalan]

Thank you for filing this bug report!
Sadly, text-overflow: ellipsis (when kerning/ligatures are on) makes us fallback to complex text codepath which seems to be unable to handle content longer than 10K.