1

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 class="line-cut" 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

Browser Version
Microsoft Edge 105.0.1343.33
Google Chrome 106.0.5249.62
Firefox 105.0.1

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.

Marcel Müller
  • 368
  • 3
  • 17

2 Answers2

0

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

title="&#x202a;%Test%.Identification.CustomerNumber"
TobyLoby
  • 322
  • 1
  • 7
  • I tried this and it does not work unfortunately. The tooltip shows the unicode exactly as it is written in the title attribute ("‪%Test%.Identification.CustomerNumber"). "‪" is not interpreted as "%". – Marcel Müller Sep 29 '22 at 12:26
0

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

Ehs4n
  • 137
  • 8