在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。