在html中如果要把多余的文字显示为省略号，那么有以下几种方法
一、单行文本。
需要自行复制；
/*设置单行文本的固定写法 *//* 设置固定的宽度 */width: 400px;/* 设置文本不换行 */white-space: nowrap;/* 设置多余文本以省略号的形式出现 */text-overflow: ellipsis;/* 裁剪多余的内容 */overflow: hidden;/* 补充一下 多行文本的写法 */
二、多行文本
利用-webkit-line-clamp属性
语法：
-webkit-line-clamp：<number>
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
需要自行粘贴：
/* 设置固定的宽度 */width: 400px;/* 裁剪多余的 */overflow : hidden;/* 多余的以省略号出现 */text-overflow: ellipsis;/* 将对象作为弹性伸缩盒子模型显示 */display: -webkit-box;/* 限制再一个块元素再文本显示的行数 */-webkit-line-clamp: 2;/* 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical;
三、用伪类模拟实现。
设定固定宽高，多余部分裁剪，在结尾用包含：：after{content(‘...’)}；的元素覆盖部分内容。（模拟实现）
需要代码，自行粘贴：
.p12{height: 200px;width: 400px;position:relative;line-height:1.4em;height:4.2em;overflow:hidden;}.p12::after{content:"...";font-weight:bold;position:absolute;bottom:0;right:0;padding:0 -20px 1px 45px;background-color:pink;}
这里用一个包含了省略号，且背景色为粉色的伪元素遮盖了部分内容。高度height 是行高 line-height 的三倍。需要显示几行文字就设置为几倍。
这种思路实现较为简单，兼容性也比较好。
注:如果要兼容ie6或7，则不能使用伪元素，可以使用一个
或者 标签。如果要支持ie8，需要将::after写成:after。
