前端小白容器溢出知识点总结2023-12-27 18:52:57一、容器溢出相关的属性 1.溢出属性(容器的) 说明: overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit; visible:默认值,溢出内容会显示在元素之外; hidden:溢出内容隐藏; scroll:滚动,溢出内容以滚动方式显示; auto:如果有溢出会添加滚动条,没有溢出正常显示; inherit:规定应该遵从父元素继承overflow属性的值。 overflow-x:X轴溢出; overflow-y:Y轴溢出 2.空余空间 说明: white-space:normal/nowrap/pre/pre-wrap /pre-line /inherit 该属性用来设置如何处理元素内的空白; normal:默认值,空白会被浏览器忽略, nowrap:文本不会换行,文本会在同一行上继续,直到遇到<br/>标签为止; 3.省略号显示 说明: text-overflow:clip/ellipsis ; clip:默认值,不显示省略号(...); ellipsis:显示省略标记; 当单行文本溢出显示省略号需要同时设置以下声明: 1.容器宽度:width:200px; 2.强制文本在一行内显示:white-space:nowrap; 3.溢出内容为隐藏:overflow:hidden; 4.溢出文本显示省略号:text-overflow:ellipsis; 扩展知识点:实现多行文本溢出时产生省略号 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性: 2.display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。 3.-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。 适用范围: 因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;但文字未超出行的情况下也会出现省略号,可结合js优化该方法 上一篇:overflow属性下一篇:CSS 文字溢出显示省略号