css怎样控制元素的显示与隐蔽
属性介绍:
(引荐教程:css视频教程)
1. display属性
display属性用于设定一个元素应怎样显示。
display: none; 潜藏对象display: block; 除了转换为块级元素之外,同时还有显示元素的意思
display潜藏元素后,不再占有本来的位置。
2. visibility可见性
visibility属性用于指定一个元素应可见还是潜藏。
visibility: visible; 元素可见visibility: hidden; 元素潜藏
visibility潜藏元素后,连续占有本来的位置。
假如潜藏元素想要本来的位置,就用visibility: hidden
假如潜藏元素不想要本来的位置,就用display: none
3. overflow溢出
overflow属性指定了假如内容溢出一个元素的框(超越其指定高度和宽度)时,会发生什么。
一样状况下,我们都不想让溢出的内容显示出来,由于溢出的部分会影响规划。但是假如有定位的盒子,请慎用overflow: hidden,由于它会潜藏余外的部分。
4. 溢出的文字省略号显示
4.1 单行文本溢出显示省略号
单行文本溢出显示省略号必需知足三个前提:
先强迫一行内显示文本
white-space: nowrap; /*默许值normal,主动换行*/
超出的部分潜藏
overflow: hidden;
文字用省略号替换超出的部分
text-overflow: ellipsis;
4.2 多行文本溢出显示省略号
多行文本溢出显示省略号,有较大兼容性问题,适合于webkit阅读器或移动端,移动端大部分是webkit内核。
overflow: hidden; text-overflow: ellipsis; /*弹性伸缩盒子模型显示*/ display: -webkit-box; /*限制在一个块元素显示的文本的行数*/ -webkit-line-clamp: 2; /*设定或检索伸缩盒子对象的子元素的摆列方式*/ -webkit-box-orient: vertical;
相关引荐:CSS教程
以上就是css怎样操纵元素的显示与潜藏的具体内容,更多请关注百分百源码网其它相关文章!