文本不换行显示，溢出部分用省略号（...）代替

1.元素不换行

.div{
	width: 150px;
    overflow: hidden;      /*溢出部分隐藏*/
    white-space: nowrap;	/*文本不换行*/
    text-overflow: ellipsis;	/*当对象内文本溢出时显示省略标记（...）*/
}

2.元素超出长度，超出部分用…代替

<div>{{text.length > 6 ? (text.substr(0, 6) + "...") : text}}</div>

3.元素不换行，仅3行显示，多出部分省略

.div{
	overflow:hidden;//超出隐藏
	text-overflow: ellipsis;//溢出用省略号显示
	display: -webkit-box;// 将对象作为弹性伸缩盒子模型显示。
	-webkit-line-clamp: 3;//超出三行隐藏
	/*! autoprefixer: off */
	-webkit-box-orient: vertical;// 从上到下垂直排列子元素
	/*! autoprefixer: on */
}