03、overflow溢出怎么办?溢出指的是内容超出父元素的区域 。
属性描述overflow溢出方式,元素内容超出盒子大小的处理方式,是overflow-x
和overflow-y
的简写属性?visible默认值 , 都会显示出来,会遮盖了后面的内容 。?hidden不显示超过对象尺寸的内容,超过部分隐藏?scrollwin系统始终显示滚动条,Mac系统和 auto
相同?auto自动处理,如果内容超出会显示滚动条3.1、文本溢出需要多个属性配合使用 。
方法描述/示例单行文本溢出,显示省略号...
text-overflow 需配合overflow
、white-space
![常用CSS样式属性](http://img.zhejianglong.com/231019/1049324Q9-8.png)
文章插图
多行文本溢出,多行末尾显示省略号使用
-webkit-box
, webkit
内核浏览器的私有前缀,只兼容Chrome\Edge\Safari浏览器长单词溢出(如url) , 强制换行使用word-wrap
、word-break
设置强制换行/* 单行内容溢出显示为省略号 */.line-over{width: 100px;background-color: burlywood;text-overflow: ellipsis; /* 溢出内容显示为省略号 */overflow: hidden; /* 隐藏溢出内容 */white-space: nowrap; /* 文本默认会自己换行 , 强制显示在一行*/}/* 多行文本 */.mline-over{width: 200px;background-color: burlywood;overflow: hidden;text-overflow:ellipsis;/* -webkit-box,webkit内核浏览器的私有前缀 , 兼容Chrome\Edge\Safari浏览器 */display: -webkit-box;-webkit-line-clamp: 2; /* 文本显示行数 */-webkit-box-orient: vertical; /* 垂直排列 */}/* 长单词()强制换行,默认是不会自动换行的,可能会超出区域 */.url{background-color: bisque; max-width: 300px;word-wrap: break-word;word-break: break-all;}
3.2、块溢出这个就简单了 , 要么隐藏,要么显示滚动条,否则的话内容会超出区域,遮挡后面的内容 。.div-over{height:100px;background-color: beige;/* x轴方向溢出隐藏 */overflow-x: hidden;/* y轴方向溢出自动处理,超过则显示滚动条 */overflow-y: auto;}
04、隐藏元素的不同方式?方法描述/示例布局交互visibility : hidden隐藏元素,类似透明效果 。会继承,但如果设置子元素visibility: visible
,则该子元素依然可见 。占据空间,不影响布局无交互display : none元素隐藏不可见,不会占据页面布局位置,比较常用的隐藏方式不占空间 , 影响布局无交互opacity : 0设置透明度为0,元素依然还在 , 可以点击交互占据空间,不影响布局有交互position 定位到外面绝对定位,把元素放到可视区域外面去position:absolute;left:-99999px; top:-90999px;
可视区域外,脱离文档流height设置元素盒子大小为0,同时隐藏溢出不占空间,影响布局无交互transform: scale(0)元素变换缩放到0, transform: scale(0,0)
占据空间,不影响布局无交互.hid1{visibility: hidden;/* 占据空间,无交互*/}.hid2{opacity: 0;/* 占据空间,有交互*/}.hid3{display: none;/* 不占据空间,无交互*/}.hid4{position: absolute;/* 可视区域外面,不占据空间 , 有交互*/left: -99999px;top: -99999px;}.hid5{transform: scale(0);/* 占据空间,无交互*/}
?版权申明:版权所有@安木夕,本文内容仅供学习 , 欢迎指正、交流,转载请注明出处!推荐阅读
- 现代 CSS 指南 -- at-rule 规则扫盲
- CSS基础知识筑基
- CSS 动画一站式指南
- SpringBoot 常用注解的原理和使用
- 弹性分布式数据集 RDD及常用算子
- 为什么CSS中的calc函数可能会不生效?
- pytorch、paddlepaddle等环境搭建 深度学习环境搭建常用网址、conda/pip命令行整理
- day03-CSS
- ES集群检查常用命令
- CSS 渐变锯齿消失术