【CSS】福利！总结css中15种隐藏！

比眉伴天荒 2022-06-05 10:17 223阅读 0赞

话不多说，直接开始了。  
1.width:0;/height:0;  
这种方式的缺点是隐藏不了文字,如果需要隐藏文字，那么：

2.针对文字 font-size:0;

3.针对文字 color:transparent;

4.opacity:0;  
原理是把元素设置为透明。

5.通过定位，把元素移出屏幕外即可。

<style> div{ position:absolute; left:-999999px; } </style>

6.通过text-indent实现文字隐藏效果

<style> div { text-indent:-999999px; } </style>

适用于：给页面添加logo，logo下面覆盖想要被搜索引擎搜索到的文字，即可用这个方法。

7.通过z-index隐藏。

<style> div{ z-index:-9999; } </style>

8.通过overflow来隐藏部分。

<style> p{ width:16ch; overflow:hidden; white-space:pre; text-overflow:ellipsis; } </style>
    <p>这是一段文字这是一段文字这是一段文字这是一段文字</p>

![这里写图片描述][SouthEast]  
超出**7个汉字**后的部分会被隐藏！

9.通过visibality将元素设置为不可见

<style> div{ visibality:hidden; } </style>

10.通过display将元素彻底隐藏,，且不占位置。

<style> div{ display:none; } </style>

11.max-width或者max-height设置为0即可

12.通过transform的translate将元素移出屏幕,原理同position的left;

<style> div{ transform:translate(-99999px); } </style>

13.将元素的缩放scale设置为0即可；

<style> div{ transform:scale(0); } </style>

14.通过skew让元素重叠(空间想象，旋转),原理类似width:0;

<style> div{ transform:skew(90deg); } </style>

15.设置margin为负值

<style> div{ margin:-99999px; } </style>

16.将元素裁剪：

<style> div{ -webkit-clip-path:polygon(0px,0px,0px,0px,0px,0px,0px,0px); } </style>

挚谢阅读。  
欢迎各位看官补充指正！

[SouthEast]: /images/20220605/8293beeef1514888a422d123a5a1b6bb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，223人围观）

还没有评论，来说两句吧...

相关阅读

相关 8 种在 CSS 中隐藏元素的方法汇总

作为一个优秀的前端，我们经常遇到需要隐藏网页上的元素的情况。在本文中，我们将分享8 种在 CSS 中隐藏元素的方法，每种方法都有优点和注意事项。 Opacity and F

今天药忘吃喽~/ 2023年10月14日 13:22/ 0 赞/ 12 阅读

相关 css隐藏滚动条

> 有时候利用形成了滚动条后，我们要保留它的功能，且隐藏它的滚动条。 scrollbar-width: none;//火狐 -ms-overflow-

一时失言乱红尘/ 2023年07月03日 10:59/ 0 赞/ 50 阅读

相关 css隐藏和居中

css 隐藏 1. display:none 元素隐藏，并不占位 2. height:0 元素隐藏，并不占位 3. visibility:hidden 元素隐藏，但

素颜马尾好姑娘i/ 2023年05月31日 07:24/ 0 赞/ 4 阅读

相关 5种css隐藏元素的方法_在CSS中隐藏元素的10种方法

5种css隐藏元素的方法 There are multiple ways to hide an element in CSS, but they differ in the

柔情只为你懂/ 2022年12月03日 01:38/ 0 赞/ 273 阅读

相关 9种HTML中通过CSS方式隐藏元素的方法

1、通过style属性中的 `display : none` 2 、通过style属性中的 `visibility : hidden` 这两种方式的区别是: disp

短命女/ 2022年10月27日 12:27/ 0 赞/ 236 阅读

相关 9种HTML中通过CSS方式隐藏元素的方法

![format_png][] 来源 | http://www.fly63.com/article/detial/10109?type=1 1、通过style属性中的

客官°小女子只卖身不卖艺/ 2022年10月26日 12:44/ 0 赞/ 357 阅读

相关 CSS隐藏元素

![在这里插入图片描述][6d81880bb46d47c28ee0995ed75edfec.png_pic_center] ![在这里插入图片描述][1f4e72f5703

青旅半醒/ 2022年09月16日 00:15/ 0 赞/ 186 阅读

相关 CSS隐藏元素

在制作网页时，隐藏内容也是一种比较常用的手法，它的作用一般有：隐藏文本/图片、隐藏链接、隐藏超出范围的内容、隐藏弹出层、隐藏滚动条、清除错位和浮动等等。使用CSS即可使

小咪咪/ 2022年08月18日 12:09/ 0 赞/ 229 阅读

相关 CSS 隐藏元素的八种方法

前言总括：本文详细讲述了在网页中用CSS隐藏元素的七种方法。原文博客地址：[从隐藏元素谈起][Link 1] 知乎专栏&&简书专题：[前端进击者（知乎

ゝ一世哀愁。/ 2022年07月14日 13:13/ 0 赞/ 188 阅读

相关【CSS】福利！总结css中15种隐藏！

话不多说，直接开始了。 1.width:0;/height:0; 这种方式的缺点是隐藏不了文字,如果需要隐藏文字，那么： 2.针对文字 font-size:0; 3

比眉伴天荒/ 2022年06月05日 10:17/ 0 赞/ 224 阅读