-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 常用注解的原理和使用
- 3.5l的砂锅有多大
- 弹性分布式数据集 RDD及常用算子
- 淀粉用冷水还是热水
- 为什么CSS中的calc函数可能会不生效？
- pytorch、paddlepaddle等环境搭建 深度学习环境搭建常用网址、conda/pip命令行整理
- day03-CSS
