浙江龙网

  1. 首页 > 生活百科 > >

常用CSS样式属性( 四 )

生活百科

03、overflow溢出怎么办？溢出指的是内容超出父元素的区域 。
属性描述overflow溢出方式，元素内容超出盒子大小的处理方式，是overflow-x 和overflow-y的简写属性?visible默认值 ， 都会显示出来，会遮盖了后面的内容 。?hidden不显示超过对象尺寸的内容，超过部分隐藏?scrollwin系统始终显示滚动条，Mac系统和 auto相同?auto自动处理，如果内容超出会显示滚动条3.1、文本溢出需要多个属性配合使用 。
方法描述/示例单行文本溢出，显示省略号...text-overflow 需配合overflow、white-space

常用CSS样式属性

文章插图
多行文本溢出，多行末尾显示省略号使用-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);/* 占据空间，无交互*/}
?版权申明：版权所有@安木夕，本文内容仅供学习 ， 欢迎指正、交流，转载请注明出处！

推荐阅读


上一篇：在CentOS7下安装Oracle11教程

下一篇：Ubuntu 下安装 redis 并且设置远程登陆和密码