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 位就会变成星号，达到了隐藏的目的。

上一篇：javascript为什么不弹框

下一篇：css文件流是什么