ellipsis省略：当文字显示不全时省略样式

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

一行省略

.font-over1{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient:vertical;}
两行省略

.font-over2{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;}

 

兼容谷歌样式：

white-space: nowrap;/*设置不换行*/
overflow: hidden; /*设置隐藏*/
text-overflow: ellipsis; /*设置隐藏部分为省略号*/

.font-over1{overflow: hidden;text-overflow: ellipsis;display: block;  
word-break:keep-all;/* 不换行 */white-space:nowrap;/* 不换行 */

 

多行文字省略，个浏览器兼容模式， ie8::after改为:after,但如果文字不满此行数省略还会存在

.special-description{height: 100px; line-height：25px;  overflow: hidden;position: relative;}

.special-description::after{content: "...";position:absolute; right: 0;bottom:0; background: #fff; padding-left: 2px;}

 

display:block;/*定义为块级*/
overflow:hidden; /*超出的部分隐藏起来。*/
white-space:nowrap;/*不显示的地方用省略号...代替*/
text-overflow:ellipsis;/* 支持 IE */
-o-text-overflow: ellipsis;    /* 支持 Opera *

这只是 让多余的 内容再 一定的宽度范围内 显示省略号，但是连续的英文字母跟数字不行。

在表格中省略文字方式

table 设置  table-layout: fixed; 样式

thead th 设置10%百分比

tbody td 设置     white-space: nowrap;overflow: hidden;text-overflow: ellipsis;