一 、容器溢出相关的属性
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;
溢出文本显示省略号: text-overflow: ellipsis
扩展知识点:实现多行文本溢出时产生省略号
display: -webkit-box; -webkit-box-orient: vertical:
webkit-line-clamp: 3: overflow: hidden:
1、-webkit-line-camp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:2、display: -webkit-box; 必须结合的属性,将对象作为弹性伸缩盒子模型显示。
3、-webkit-box-orient 必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式
舌用范围:
因使用了Webkit的CSS扩展属性,该方法适用于WebKit浏览器及移动端,但文字未超出行的情况下也会出现省略号,可结合is优化该方法