[Bug] legend. textStyle. ellipsis the setting is not accurate enough when processing English, Arabic and other texts.

### 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-nGAaZvb9mBw5CeOmxmEhM4TmY05SRkcFwfJ3pSFhhA4bAexkHyewANxAA

### 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.

```

Ellipsis Example

.ellipsis-container {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
border: 1px solid #ccc;
}

```

### 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_