.hide-text { text-indent: -9999px; background-repeat: no-repeat; background-position: center; overflow: hidden; } .hide-text-dot { background-image: radial-gradient(circle, #000 10%, transparent 10.5%); background-size: 15px 15px; }
以上是两个常见的 CSS 样式,实现隐藏文本并显示点的方式。
第一个样式.hide-text
实际上是将文本缩进到容器之外,然后使用背景图像来覆盖文本。这样就可以实现隐藏文本的效果。
而第二个样式.hide-text-dot
则使用了 CSS 渐变来生成一系列圆点,然后作为背景图像显示在文本上方。这样就可以让文本被点遮盖,从而达到隐藏的效果。
除了以上两种方式,还有许多其他的隐藏文本方法,可以根据实际需求进行选择。例如通过设置字体大小为 0,使用 CSS 伪元素等。
总之,CSS 技术可以使大家更加灵活地控制文本的显示方式,为网页设计提供了更多样式和效果选择。