已有CSS隐藏表格单元格内容，如何实现仅显示最后四位？

方案一：拆分HTML结构（简单直接） #

直接将单元格内的内容拆分为「需要隐藏的前缀」和「显示的最后四位」，用<span>包裹前缀并应用掩码样式：

修改后的HTML：

<table>
  <tr>
    <td width="120">ID NUMBER</td>
    <td width="15">:</td>
    <td id="data2" class="hidetext"><span class="mask">123456</span>7890</td>
  </tr>
  <tr>
    <td>PHONE</td>
    <td>:</td>
    <td id="data3" class="hidetext"><span class="mask">000000</span>0000</td>
  </tr>
</table>

对应的CSS：

.hidetext .mask {
  -webkit-text-security: circle;
}

方案二：用Data属性+CSS伪元素（无需拆分原始内容） #

如果不想改动原始文本结构，可以给目标单元格添加data-last属性存储最后四位，再通过伪元素覆盖显示：

修改后的HTML：

<table>
  <tr>
    <td width="120">ID NUMBER</td>
    <td width="15">:</td>
    <td id="data2" class="hidetext" data-last="7890">1234567890</td>
  </tr>
  <tr>
    <td>PHONE</td>
    <td>:</td>
    <td id="data3" class="hidetext" data-last="0000">0000000000</td>
  </tr>
</table>

对应的CSS：

.hidetext {
  position: relative;
  -webkit-text-security: circle;
}
.hidetext::after {
  content: attr(data-last);
  position: absolute;
  right: 0;
  top: 0;
  background-color: #fff; /* 需与表格背景色保持一致，避免透出掩码 */
  padding-left: 5px; /* 可选：增加与前缀掩码的间距 */
}

方案三：自动提取最后四位（JS辅助批量处理） #

如果需要批量处理多个单元格，无需手动添加data-last，可以用JS自动提取每个.hidetext元素的最后四位：

添加以下JS代码：

document.querySelectorAll('.hidetext').forEach(el => {
  const fullText = el.textContent.trim();
  el.dataset.last = fullText.slice(-4);
});

搭配方案二的CSS即可生效。

内容的提问来源于stack exchange，提问作者Link