css超出省略号

1、根据文本框大小实现单行超出省略号

.more{
   overflow: hidden;    
 	text-overflow: ellipsis;      //超出部分以省略号显示
 	white-space: nowrap;
 	width: 30px;  
 }
<p class="more">山谷那里是没有早晨的，没有旭日朝阳，永远是不同与世间的阴凉的黄昏</p>

效果：
山谷那里是没有早晨的，没有…

2、根据行数实现超出省略号

.more{
  overflow : hidden;         /*  规定当内容溢出元素框时发生的事情 */
  text-overflow: ellipsis;	/* 规定当文本溢出包含元素时发生的事情  */
  display: -webkit-box;		/*	规定元素应该生成的框的类型 */
  -webkit-line-clamp: 2;      /* 可以显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical; /* 规定框的子元素应该被水平或垂直排列 */
 }
 <p class="more">
     山谷那里是没有早晨的，没有旭日朝阳，永远是不同与世间的阴凉的黄昏
     山谷那里是没有早晨的，没有旭日朝阳，永远是不同与世间的阴凉的黄昏
     山谷那里是没有早晨的，没有旭日朝阳，永远是不同与世间的阴凉的黄昏
     山谷那里是没有早晨的，没有旭日朝阳，永远是不同与世间的阴凉的黄昏
 </p>

效果：
山谷那里是没有早晨的，没有旭日朝阳，永远是不同与世间的阴凉的黄昏
山谷那里是没有早晨的，没有旭日朝阳，永远是不同与世间的阴凉的…

注意！！！
webpack编译后将会丢失，必须修改成以下

	 /* autoprefixer: off*/
    -webkit-box-orient: vertical;
    /* autoprefixer: on*/

推荐
阮一峰的网络日志
_wave博客