技術標籤：小技巧CSS

如圖：超出限制行數顯示…

可以用css實現

單行文字

.text {
    width: 100%;
	display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

多行文字

.text {
	width: 190px;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-
 
webkit-line-clamp: 2;
}

在vue中也可以用過濾器filters實現

<div> {{ text | cutOut }} </div>

export default {
	filters: {
	  cutOut(val) {
	    if (!val) return ''
	    if (val.length > 10) {
	      return val.slice(0,10) + '...'
	    }
	    return val
	  }
	}
}