I have got a problem with the code snippet below. As you can see hovering over the "Hello" should show %Test%.Identification.CustomerNumber as a tooltip. The problem is that the first "%" letter is not shown in the tooltip, so there is only Test%.Identification.CustomerNumber in the tooltip.

.line-cut {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
  direction: rtl
}

<div  title="%Test%.Identification.CustomerNumber">
   Hello
</div>

When I remove direction: rtl from my css it works perfectly and shows what it is supposed to. I have not found a solution or a workaround yet. I tried it with following browsers but the error occured on every browser. I listed the browsers and the versions I used in the table below

Can some help me to fix the problem or knows a workaround? Could this be a bug in the chromium and gecko engine? Please do not hesitate to comment for further information or questions.

CodePudding user response：

Does this help? Using the Unicode LEFT-TO-RIGHT OVERRIDE, found here.

title="‪%Test%.Identification.CustomerNumber"

CodePudding user response：

you can use Left-To-Right Embedding UniCode at first of your string, Unicode Hex Character Code ‪ learn more in this link.