时间戳

首页 > 解决方案 > HTML & CSS - 隐藏由散列和字母数字组成的字符串的前面部分

javascript - HTML & CSS - 隐藏由散列和字母数字组成的字符串的前面部分

问题描述

我正在展示一些可变长度的敏感字母数字数据（想象一下哈希或校验和），其中只有最后四个字符对用户可见，其余字符替换为“#”字符。它被放置在一个表格列中，当用户调整浏览器窗口的大小时，其宽度可能会发生变化。由于该列的数据有时太长，我应该隐藏最初的“#”，以便只有相关部分可见，并且前面需要尽可能多的“#”来填充该列。

现在，我找到了一些建议来使用该技巧并设置以下内容：

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

例如： https ://stackoverflow.com/a/9793669

好吧，这就是效果：http: //jsfiddle.net/7qp8daj4/

请注意，由于某种原因，第一个字符串似乎以非散列字符开头，然后是散列，而第二个字符串显示正确。通过反复试验，我设法弄清楚“原因”是第一个字符串以非数字开头。如果我用 eg 替换第一行，<span>##########1YH35</span>它会正确显示。

关于原因或如何解决的任何想法？或者你知道这个要求的任何其他很酷的解决方案吗？

标签： javascripthtmlcss

解决方案

在与同事进行简短讨论后，我找到了解决方案或解决方法：用标签包装内容。

http://jsfiddle.net/grxLabq3/

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

使用相同的 CSS：

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

看起来浏览器将第一个字符串视为两个单独的单词或一个单词和特殊字符，并且由于方向设置而改变了顺序。

我不是 100% 确定这种推理是否正确以及它是否是做这些事情的正确方法，但看起来还不错。如果有人有更好的想法，请随时发表评论：）

推荐阅读