元素的隐藏和显示
程序员文章站
2024-01-29 17:56:10
...
1.display:none
<!DOCTYPE html>
<html>
<head>
<style>
.aaa,.bbb,.ccc{
background-color:red;
}
</style>
</head>
<body>
<div class="aaa">
<p>我是一号元素</p>
</div>
<div class="bbb">
<p>我是二号元素</p>
</div>
<div class="ccc">
<p>我是三号元素</p>
</div>
</body>
</html>
现在为class="bbb"的盒子设置display:none; 看一下效果如下图所示:
可以看出整行元素完全消失了!并且不占用空间!
display:none; 1)控制元素是否显示或隐藏 2)所有的后代元素都隐藏,好像这个元素不存在,完全消失
2.visibility:hidden
接下来我们为第二行添加属性visibility:hidden;
可以看出元素虽然没有显示,但是仍然占据该有的空间位置。
visibility的取值通常为visible和hidden,默认为visible;
visibility:hidden; 1)元素的大小不变,可理解为透明 2)子元素设置为visibility:visible;子元素仍然可见,如下图所示:
3.overflow
overflow的取值一般为:auto. hidden, scroll;
这里我们就主要讲讲,文字超过内容区时如何用省略号来表示
这个需要三条语句一起来完成:
p{
text-overflow:ellipsis; /*文本超出部分用省略号表示*/
white-space: nowrap; /*超过不换行*/
overflow:hidden; /*超出的部分隐藏起来*/
}
上面的语句还需要width设置小一点,这里我们设置的是50px;
本博客由博主原创,如需转载需说明出处!谢谢支持!
上一篇: 一个空格引发的“*“
下一篇: CSS实现文本溢出时显示省略号...
推荐阅读
-
元素的隐藏和显示
-
php隐藏IP地址后两位显示为星号的方法,ip星号_PHP教程
-
多说自定义CSS动感头像和多说评论显示User Agent的那些小事_html/css_WEB-ITnose
-
解析android中隐藏与显示软键盘及不自动弹出键盘的实现方法
-
Web开发学习笔记:Ionic4中根据滚动条滚动的距离设置返回顶部按钮显示与隐藏
-
django模型中的字段和model名显示为中文小技巧分享
-
js实现的点击超链显示隐藏层_javascript技巧
-
在Word2007中显示和隐藏样式
-
如何用js控制frame的隐藏或显示的解决办法_javascript技巧
-
Jquery实现控件的隐藏和显示实例