样式声明——溢出属性

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！

系列文章目录

前端系列文章——传送门
CSS系列文章——传送门

---

---

1.溢出

指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条
仅适用于具有指定高度的块元素

overflow:

visible:	默认。溢出没有被剪裁。内容在元素框外渲染
hidden:		溢出被剪裁，其余内容将不可见
scroll:		溢出被剪裁，同时添加滚动条以查看其余内容
auto:		与 scroll 类似，但仅在必要时添加滚动条

overflow-x 和 overflow-y

属性规定是仅水平还是垂直地（或同时）更改内容的溢出

overflow-x 指定如何处理内容的左/右边缘
overflow-y 指定如何处理内容的上/下边缘

2.用途

文本溢出隐藏,超出部分显示…或者截取，前提必须有宽度

• 显示… text-overflow: ellipsis;
• 截取 text-overflow: clip

1. 单行文本：

CSS: {
	width: ___px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
};

2. 多行文本：

CSS: {
	width: ___px;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-line-clamp:2;
	display:-webkit-box;
	-webkit-box-orient:vertical;
}

使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端

1.-webkit-line-clamp 用来限制在一个块元素显示的文本的行数
为了实现该效果，它需要组合其他的WebKit属性
常见结合属性：
2.display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示
3.-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

---

注

本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のBlog