关于文字溢出（text-overflow）及相关延伸

text-overflow 属性值————————————————————
clip 修剪文本，强制截断，将超出文本隐藏。
ellipsis 显示“……”来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。

常用属性—————————
text-overflow: ellipsis;
该css的作用是，当内容超出“盒子”大小的时候，溢出的部分以“……”的形式显示。

按照text-overflow: ellipsis;使用规则，在标签样式中添加该属性未生效，
例如：
CSS样式————————————————————
.box{
text-overflow: ellipsis;
}
<div class="box">文字溢出效果测试。文字溢出效果测试。文字溢出效果测试。文字溢出效果测试。文字溢出效果测试。文字溢出效果测试。</div>
预览之后，发现并没有显示我们想要的需要效果。

其实还需要另外几个CSS属性的配合（或者说只有相应的限制条件，或者说处理状况的基础）：

情况一（单行溢出处理）————————————–

width: 100%;    /*规定盒子的大小，也可以是固定的值*/
white-space: nowrap;   /*强制文字不换行，正常情况下浏览器默认处理是换行的，此设定相当于设定height值为单行高度*/
overflow: hidden; /*溢出隐藏*/
text-overflow: ellipsis;

情况二（多行溢出处理）————————————–

width: 100%;   /*规定盒子的大小，也可以是固定的值*/    
overflow: hidden;   /*隐藏超出的内容*/
text-overflow: ellipsis;
word-break: break-all;  /*破坏所有类型的字符对象*/
display: -webkit-box;  /*对象作为伸缩盒子模型显示*/
-webkit-box-orient: vertical;  /*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-line-clamp: 3;  /*显示的行数*/

浏览器对该属性的支持问题—————————————-

text-overflow: ellipsis;  /* IE, WebKit (Safari, Chrome), Firefox 7, Opera 11 */
-o-text-overflow: ellipsis;  /* Opera 9-10 */  

注：如有不足的地方，希望联系修改！！！