css displays ellipses at the beginning (left) when text overflows

1. First set the overflow text to display ellipses:

.el-select__tags-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

2. Then set the text to display from right to left (note that it needs to be set to the selector of the last level. For example, if the DOM level is div > p > span, it must be set to span; if it is set to div or p above, it may cause the text to be neither displayed in reverse order nor in order, but displayed in disorder. If you don’t believe it, try this text and you will know what’s going on: 2021-07-wk3):

.vxe-cell--title {
    direction: rtl;
    unicode-bidi: bidi-override;
}

3. Finally, use js to reverse the original order of the text and display the reversed result:

const str = '2021-07-wk3'
const result = str.split('').reverse().join('')

Effect:

Note that if you try to use title or tooltip-overflow to display the complete text when the cursor is hovering, you cannot use the converted text directly, otherwise the complete text content displayed by title or tooltip-overflow will also be in reverse order. At this time, additional logic processing is required, so that title or tooltip-overflow can display the text content before inversion: