文字超过一行的时候隐藏并用...替代（css实现）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chongchong1325/article/details/77532717

今天在项目中碰到了个问题，当文字超过一行的时候隐藏文字并用...代替，刚开始想着是用文字的字数进行限制的，想着用过滤器实现。后来又想到元素所包含的文字字数是不确定的，这种方法行不通，咨询了一下同事，知道了可以直接用css实现，记录一下。

啥也不多说了，直接上代码

         .issueInfo_news_con	p{
			word-break:break-all;
			text-overflow:ellipsis;
			display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
			-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
			-webkit-line-clamp:1 ; /** 显示的行数 **/
			overflow: hidden;  /** 隐藏超出的内容 **/
			font-size:0.12rem;
			color:#BDBCCF ;
			cursor:default;
			text-indent: 0em;	
		}

用法就是直接把样式加在要限制的元素上面就可以了，如代码所示，我限制的是p标签