单行多行文字隐藏显示省略号

一、单行文字

文字单行隐藏：给它设定一个宽和高，对于文字超出部分进行隐藏，多余的部分用省略号来表示。

text-overflow: ellipsis;
overflow: hidden ;
white-space: nowrap;

二、多行文字

overflow : hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
display: -webkit-box;

上面这个方法存在浏览器兼容性问题，只适合webkit内核的浏览器。
另外应该给文本盒子设置一个宽度。

// 多行文本溢出，解决兼容性
.overflow-text {
		position: relative;
		width: 100px;
		line-height: 1.4em;
		height: 4.2em;
		overflow: hidden;

		&::after {
			content: '...';
			font-weight: bold;
			position: absolute;
			bottom: 0;
			right: 0;
			padding: 0 20px 1px 45px;
			background-color: #fff;
		}
}