yukiyukixing opened a new issue, #19622: URL: https://github.com/apache/echarts/issues/19622
### Version 5.5.0 ### Link to Minimal Reproduction https://echarts.apache.org/examples/zh/editor.html?c=line-simple&renderer=svg&code=PYBwLglsB2AEC8sDeAoWsA2BTA5l6AJgFzJrqxgCeIWJA5CBgIYTR0A0Z6EAxjPQCcsPMBy6wIYLAFsA6hAJgAFiQCMANk7kJU6QAksEHErAkALFvKSZAcSYg1m8VIAeYAMpVsJVNvQAzGDBZQ2NTWABWAAYoy21A6A8IAC9aWFUAJjjyPgxgAXoAYgBmdTNVcrE_TFYsAyMTEidqgHcFZTUY7PRgADcsAX88lvowAQBXaB4mKSq_LAwMCBAAZwgV-gA6bbpxAF9sghmmEgBtcXQ6QsAxMEAhMEByMEAWMAB9e8ARMEBiMEBmMEAKMEAJMEAnGDPQCiYEDHvc_sDAFJgAFoXBAmMBpBAzHNtFcAEZY7E43F4_E4tHkK5LaALWqk8lkyk0im1ImXQpMZks1ls9kc1m7bQAXTIBzIYGAwAwkAcyAF6BcAEF4RtSNojmATrBTnRplIcPlKFEOLB1TNcNrVHqDZrtRk6Hz0JLYJRZesfOIVoxJNKhCrfH4VkpgCMKBMsPt-ZYVgMIFh5edtF7tNAmNI0lc7k9Xp9foCQWCIdC4QikSiGRRqEnKUWVsqeABrehMRblyjSDEi-g8CACHjYBtNkXuFJpVSxC6wJUq06qTZRYrsWBRTbqKKqGdzgAcEXUPO6sArWHFdHwBG55Ft6Fj5HjiaKBOvN9xRaoNHoZa3FaY1dr9ZfjebGFb7c7WDdj-fapJ0W6jmcE6qJky6bAAnKUsEAOxRGYm7Djue4HkeNrZGe6AXkmhS0tSdKkeRVKUfeJZPvSL6VjW-p1hgQEtvqbYdl2X49hgIEDkO1QQaqUEaLBK5IRY6SbBk6hIeh1SYfQ2H7Hhw6EUUnKaVpbLUY--rPhhDEfix3E_n-nGAaZvb9mBw5CeOmxmEhM4TmY05SRkcF wfJ3pSFhhA4bAexkHyewANxAA ### Steps to Reproduce  I set width:100, but the length of the displayed text is only 79.8. This gap is too big because there is the letter "i" in this text, and the letter "a" is used in zrend to represent all letters. the width of  This is too imprecise, which leads to a large gap in the end. Perhaps a more precise method should be used to calculate the width of letters, and the gap is even greater for Arabic letters. For example, calculate it like this: ``` function truncateTextToWidth(text, maxWidth, font) { const canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); context.font = font; const ellipsis = "..."; const ellipsisWidth = context.measureText(ellipsis).width; let currentWidth = 0; let truncatedText = ""; for (let i = 0; i < text.length; i++) { const char = text[i]; const charWidth = context.measureText(char).width; if (currentWidth + charWidth + ellipsisWidth > maxWidth) { return truncatedText + ellipsis; } currentWidth += charWidth; truncatedText += char; } return truncatedText; } const text = "#linelinelinelinelinelinelineline"; const maxWidth = 100; const font = "500 12px sans-serif"; const truncated = truncateTextToWidth(text, maxWidth, font); console.log(truncated); ``` ### Current Behavior The current text overflow processing result is not ideal, and the understanding result should be similar to the processing result of text-overflow: ellipsis; in CSS. ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Ellipsis Example</title> <style> .ellipsis-container { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; border: 1px solid #ccc; } </style> </head> <body> <div class="ellipsis-container">#نقاش_الأسبوع_مع_شاومي-xiaomi4</div> <div class="ellipsis-container">#项目2222项目项目项目项目项目项目项目</div> <div class="ellipsis-container">#linelinelinelinelinelinelineline</div> </body> </html> ``` ### Expected Behavior the understanding result should be similar to the processing result of text-overflow: ellipsis; in CSS. ### Environment ```markdown - OS: - Browser: - Framework: ``` ### Any additional comments? _No response_ -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org
