css数字中间变成星号

在网页开发中，我们经常会遇到需要隐藏敏感信息的情况，比如银行卡号、电话号码等。这种情况下，我们可以使用 CSS 将部分数字中间变成星号来达到隐藏的效果。

/* 将银行卡号中间 8 位变成星号 */.card-number {
    font-size: 24px;
    font-weight: bold;
}
.card-number::before {
    content: "";
    display: inline-block;
    width: 50px;
}
.card-number::after {
    content: "";
    display: inline-block;
    width: 50px;
}
.card-number span {
    display: inline-block;
    line-height: 1;
    letter-spacing: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.card-number span::before {
    content: "**** **** **** ";
    letter-spacing: normal;
}
    

上面的 CSS 代码中，我们首先定义了一个名为.card-number的类，用于表示银行卡号元素。然后使用::before和::after伪元素插入一些空白区域，使银行卡号居中显示。

接下来，我们使用letter-spacing属性将所有数字之间的间距设为 10px，这样可以使数字之间的星号正好覆盖住。

通过::before伪元素插入一段星号占位符**** **** ****，再将数字部分用span标签包裹，用text-overflow: ellipsis实现超出部分省略号的效果。最后使用span::before将星号覆盖到数字上。

如此一来，银行卡号中间 8 位就会变成星号，达到了隐藏的目的。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！