整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS实战篇 - 文字隐藏

.效果图

二.相关代码

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>文字隐藏</title>
 <style>
 div.elli{
 border:1px solid;
 overflow:hidden;/*内容会被修剪,并且其余内容是不可见的*/
 white-space:nowrap;/*强制在一行显示*/
 text-overflow:ellipsis;/*显示省略符号来代表被修剪的文本*/
 width:200px;
 height:20px;
 }
 div.clip
 {
 border:1px solid;
 overflow:hidden; /*超出部分隐藏*/
 white-space:nowrap;/*强制在一行显示*/
 text-overflow:clip;
 width:200px;
 height:20px;
 }
 div.hide
 {
 overflow:hidden;
 border:1px solid;
 width:200px;
 height:50px;
 }
 div.scroll
 {
 overflow:scroll;/*内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容*/
 border:1px solid;
 width:200px;
 height:50px;
 }
 </style>
</head>
<body>
<h3 style="color: #98bf21">1.多余文字自动裁剪</h3>
<div class="clip">如果此处的文字较多,将自动裁切裁切裁切裁切</div>
<br>
<h3 style="color: #98bf21">2.多余文字省略号代替</h3>
<div class="elli"><a href="#">如果此处的文字较多,将自动用省略号代替!</a></div>
<br>
<h3 style="color: #98bf21">3.多余文字自动隐藏</h3>
<div class="hide">如果此处的文字较多,将自动隐藏!如果此处的文字较多,将自动隐藏!如果此处的文字较多,将自动隐藏!如果此处的文字较多,将自动隐藏!如果此处的文字较多,将自动隐藏!</div>
<br>
<h3 style="color: #98bf21">4.多余文字出现滚动条</h3>
<div class="scroll">如果此处的文字较多,将出现滚动条!如果此处的文字较多,将出现滚动条!如果此处的文字较多,将出现滚动条!</div>
</body>
</html>

三.名词释义

3.1 overflow

3.2 white-space

3.3 text-overflow

、 通过style属性中的 display : none { 这种是最常用方式之一 }

display : none

这两种方式的区别是: display 设置为 none之后, 该元素不占用文档流

visibility 设置为 hidden之后, 该元素仍然占用文档流, 只不过是看不见了而已

2 、通过style属性中的 visibility : hidden { 这种也是最常用的方式之一 }

visibility : hidden

3 、通过相对定位移动当前元素到屏幕左侧

div{     
    position: relative;     
    left: -100%
}

但是要记住:

1 元素仍然占用标准文档流 2 百分比是相对父元素的宽度和高度的, 并不是相对可视区宽度偏移的

4 、通过元素内文本对齐将子元素移动到父元素右侧, 配合超出后不显示

.div{    
    text-indent: 100%;    
    white-space: nowrap;    
    overflow: hidden;
}

注意点: 此时子元素仍然占用文档流, 只是我们隐藏了超出部分

5 、设置元素的宽度和高度为0, 元素直接消失

.div{    
    width: 0px;    
    height: 0px;
}

注意点:

1 标准文档流是相对于一个容器来说的, 每一个容器有自己的文档流, 我们只关心当前元素所在的文档流 2 高度和宽度都设置为0后, 我们就可以认为此元素不再占用其父元素的标准文档流了, 但是这个容器仍然存在, 这个容器也存在一个标准文档流, 供其子元素使用; 其子元素不会消失, 仍然会正常显示, 但是不会占用其父元素所在的标准文档流( 即子元素显示不会受其影响, 此元素占用文档流的大小也不会受其子元素的影响 )

6 、设置元素透明度为 0

div{    
  opacity: 0;
}

这个感觉有点傻乎乎的, 掩耳盗铃, 不过这个经常用来做动画变换

7、 旋转元素, 使与当前页面垂直

div{    
  transform: rotateX(90deg);
}

注意点: 这个只是显示上的变换, 仍然会占用原元素大小和位置的文档流, 其它各种变换也是如此。

8 、缩小元素尺寸到自身的0倍

div{    
  transform: scale(0);
}

注意点: 同上

9 、其它 transform 使其假不可见

2021 年最后一天,疫情还没有完全结束,武汉市政府也取消了跨年活动。今晚,就连地铁都提前到 9 点关闭,大家都在家里跨年。这不,我也在家里跨年。不过我并没有看晚会,而是整理了一篇前端小技巧,算是给自己 2021年一个小小的总结。


正文

用 CSS 隐藏元素有很多种方法,这里介绍 3 种常见的。

opacity: 0

特点是【看不见,占空间,摸得着

  • 元素隐藏
  • 不改变布局
  • 如果绑定了事件,点击该区域,是可以触发事件的

visibility: hidden

特点是【看不见,占空间,摸不着

  • 元素隐藏
  • 不改变布局
  • 如果绑定了事件,点击该区域,是无法触发事件的

display: none

特点是【看不见,不占空间,摸不着

  • 元素隐藏
  • 改变布局
  • 如果绑定了事件,点击该区域,是无法触发事件的

接下来,我们来编写代码验证一下。首先写入三个方块,对中间的橙色方块添加点击事件。代码及页面效果如下所示:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function() {
                alert('触发点击操作 0.0');
            }
        </script>
    </body>
</html>

image

image

image

opacity: 0

对中间橙色方块添加 opacity: 0 样式,代码及效果如下:

  • 元素隐藏
  • 不改变布局
  • 如果绑定了事件,点击该区域,是可以触发事件的
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
            .opacity {opacity: 0}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange opacity' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function() {
                alert('触发点击操作 0.0');
            }
        </script>
    </body>
</html>

image

image

image

visibility: hidden

对中间橙色方块添加 visibility: hidden 样式,代码及效果如下:

  • 元素隐藏
  • 不改变布局
  • 如果绑定了事件,点击该区域,是无法触发事件的
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
            .visibility {visibility: hidden}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange visibility' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function() {
                alert('触发点击操作 0.0');
            }
        </script>
    </body>
</html>

image

image

image

display: none

对中间橙色方块添加 display: none 样式,代码及效果如下:

  • 元素隐藏
  • 改变布局
  • 如果绑定了事件,点击该区域,是无法触发事件的
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .box {width: 200px;height: 50px;}
            .red {background-color: red;}
            .orange {background-color: orange;}
            .yellow {background-color: yellow;}
            .display {display: none}
        </style>
    </head>

    <body>
        <div>
            <div class='box red'></div>
            <div class='box orange display' id="btn"></div>
            <div class='box yellow'></div>
        </div>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function() {
                alert('触发点击操作 0.0');
            }
        </script>
    </body>
</html>

image

image


结尾

本人 2021 年度成就总结:

  1. 学术方面,凭借个人努力,在核酸检测领域产出多份数据真实详尽的报告。
  2. 健康方面,保证膳食纤维摄入,具体表现为每日坚持吃瓜,吃好瓜,吃大瓜。
  3. 商业方面,与各大平台合作,全面参与投资 618、双 11、双 12 等千亿级重大项目。
  4. 环保方面,股票基金一片绿,绿水青山就是金山银山。在废物利用领域更是成绩斐然:自己作为废物,常常被别人利用。
  5. 运动方面,专注于水上项目,在摸鱼、划水等小项上有突出表现。

最后,祝大家元旦快乐~