工作中遇到的css实例

css实例

持续更新…

文本溢出

文本溢出主要考虑几个方面： 换行（white-space）、超出显示（overflow,text-overflow）、多行文本需兼容

1、单行文本溢出

	width: 100px; (宽度非必须，响应式)
	word-break: break-all; （连续英文情况下需该属性）
	white-space: nowrap; （不换行）
	overflow: hidden;
	text-overflow: ellipsis;

2、多行文本溢出

	width: 100px; (宽度非必须，响应式)
	display: -webkit-box; （必须，定义对象为弹性伸缩盒子模型）
	-webkit-line-clamp: 3; （行数）
	-webkit-box-orient: vertical;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;

实现文本溢出还可以通过js、伪元素等方法实现，感兴趣的可参考以下文章：
https://juejin.cn/post/6844903988081475591