前端小白容器溢出知识点总结

一、容器溢出相关的属性
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 文字溢出显示省略号