基础设置
在介绍下面的方法之前，大家先对所有的例子进行基础的样式设置
/*基础设置*/div.box{width:100px;height:100px;border:1pxsolid#ddd;color:#333;line-height:1.8;margin:30pxauto;}
设置好啦，现在大家开始表演=.=
1.单行溢出隐藏显示…
<!--单行溢出隐藏显示...--><divclass="boxtext-box1"><p>目录结构清晰是首要目标，至于命名只要能达到表意的目的即可。目录结构清晰</p></div>/*1.单行溢出隐藏显示...(在文字的容器上设置)*/.text-box1p{white-space:nowrap;/*超出的空白区域不换行*/overflow:hidden;/*超出隐藏*/text-overflow:ellipsis;/*文本超出显示省略号*/}
偶一定要把每一步都记得清清楚楚，因为偶发现不写清楚为什么这样设置，过段时间真的会忘了。
运行效果：
2.多行溢出隐藏显示…
<!--多行溢出隐藏显示...（只兼容webkit内核的浏览器）--><divclass="boxtext-box2"><p>目录结构清晰是首要目标，至于命名只要能达到表意的目的即可。目录结构清晰</p></div>/*2.多行溢出隐藏显示...(在文字的容器上设置)只兼容webkit内核的浏览器*/.text-box2p{display:-webkit-box;/*将对象转为弹性盒模型展示*/-webkit-box-orient:vertical;/*设置弹性盒模型子元素的排列方式*/-webkit-line-clamp:2;/*限制文本行数*/overflow:hidden;/*超出隐藏*/}
运行效果：
3.多行溢出隐藏显示…
<!--多行溢出隐藏显示...(跨浏览器兼容+伪元素定位)--><divclass="boxtext-box3"><p>目录结构清晰是首要目标，至于命名只要能达到表意的目的即可。目录结构</p></div>/*3.多行溢出隐藏显示...(跨浏览器兼容+伪元素定位)*/.text-box3p{position:relative;line-height:1.4em;/*行高和height成倍数，这里以三行文本超出隐藏举例*/height:4.2em;overflow:hidden;}.text-box3p::after{/*若要兼容IE8需用:after*/content:"...";/*替换内容比较灵活*/position:absolute;bottom:2px;right:5px;padding:03px;background:#fff;/*颜色和文字背景保持一致*/box-shadow:0010px#fff;/*边缘处理*/}
这种方式比较灵活，但是实现的效果可能会比较生硬，所以需要对边缘进行虚化处理。
运行效果：
意思是这个意思，或许会有更合适的方法进行处理
