（一）文本溢出处理方式

div盒子显示具体行数多余的通过...显示

说明

在我刚接触到前端的时候像一下这种超出省略的效果我都是手敲的，要不是就直接超出隐藏，但是这样很不美观，后面发现了 css 就可以完成这个效果，下面奉上代码

一、显示一行

// 只显示一行，多余的通过...
// 只显示一行的设置方法很简单
.item{	
    overflow: hidden;			// 溢出隐藏
    white-space: nowrap;		// 强制一行显示文本
    text-overflow: ellipsis;	// 溢出部分使用ellipsis 也就是省略号显示
}

最终效果图:

二、显示多行

// 多行显示，多余的通过... 
// 多行的设置比单行的要多几个内容
.item{
	overflow: hidden;				// 老样子溢出隐藏
	text-overflow: ellipsis;		// 溢出的部分还是使用ellospis 显示
	display: -webkit-box;			// 把盒子设置为弹性盒子
	-webkit-box-orient: vertical;   // 垂直上到下的子元素
	-wekit-line-clamp: 2;			// 这行就是关键了具体要显示多少行就在这里设置了
}

最终效果图:

三、总结

各位观众老爷以上呢是我的一个自我总结，全部纯手敲，要错误的地方还望手下留情不要喷我，还有就是以上设置方法有浏览器的兼容问题，但是都这个年代了老浏览器都淘汰了，懂得都懂啊，886