HTML & CSS - hide front part of string consisting of hashes and alphanumeric

Question

I'm presenting some sensitive alphanumeric data (imagine a hash or checksum) of variable length, out of which only last four characters should be visible to user, rest is replaced with '#' characters. It's placed in a table column, whose width might change, when the user resizes the browser window. Since the data is sometimes too long for the column, i'm supposed to hide the initial '#', so that only the relevant part is visible and as many '#' in front required to fill the column.

Now, i've found a couple of suggestions to use the trick with setting the following:

text-overflow: ellipsis;
direction:rtl;
text-align:left;
white-space: nowrap;                   
overflow: hidden;

eg: https://stackoverflow.com/a/9793669

Well, this is the efect: http://jsfiddle.net/7qp8daj4/

Note, that for some reason the first string appears to start with the non-hash characters, followed by the hashes, while the second is presented correctly. By trial-and-error i managed to figure out that the "cause" is that the first string starts with a non-digit. If i replace the first line with eg <span>##########1YH35</span> it is displayed correctly.

Any ideas as to the cause or how to fix it? Or do you know any other cool solution for this requirement?

You should not be sending sensitive data the the client shouldn't see. JavaScript cannot secure this information. — ControlAltDel, Apr 22 '21 at 16:03
Thanks for this note, but this is not the issue here. The problem is with displaying it correctly. I'm sending the masked version, eg. ##########1YH35 — jgolda, Apr 23 '21 at 06:34
The direction rtl is required to hide the front of the string using text-overflow ellipsis, instead of the end of the string — jgolda, Apr 26 '21 at 12:57

score 0 · Answer 1 · answered Apr 23 '21 at 12:17

After a brief discussion with a colleague i found a solution or a workaround: wrap the content with a tag.

http://jsfiddle.net/grxLabq3/

<span><bdi>##########YH35</bdi></span>
<br/>
<span><bdi>##########8LHm</bdi></span>

With the same CSS:

span {  
  white-space: nowrap;                   
  overflow: hidden;
  text-overflow:    ellipsis;  
  display: inline-block;
  max-width:170px;
  direction:rtl;
  text-align:left;
}

It looks like the browser treats the first string as two seperate words or as a word and special characters and changes the order because of the direction setting.

I'm not 100% sure if this reasoning is correct and if it's the right way of doing this stuff, but looks okayish. Feel free to comment if anyone has any better idea :)

HTML & CSS - hide front part of string consisting of hashes and alphanumeric

1 Answers1