我們經常會在開發過程中遇到這樣的需求：不換行，超出的文本顯示省略號；或者是超出兩行顯示省略號。那么我們都知道這個功能是CSS就能實現的，但是我們可能會經常忘記這些CSS屬性，或者會記得比較混亂，那么我們就來看一下怎么實現超出文本顯示省略號的功能實現吧：

下面我以vue開發為例給大家上一段正常的修飾代碼：

<template>
	<div id="box">
		<p>圣誕節瘋狂世紀東方很順利的反饋矢量庫分段函數勞動法考核</p>
	</div>
</template>

<script>
</script>

<style lang='scss'>
    #box{
	width: 100%;
	height: 100px;
	background: pink;
	p{
	    font-size: 16px;
	    line-height: 24px;
	}
    }
</style>

我們來看效果圖：

下面我們做超出顯示省略號：

<template>
	<div id="box">
		<p>圣誕節瘋狂世紀東方很順利的反饋矢量庫分段函數勞動法考核</p>
	</div>
</template>

<script>
</script>

<style lang='scss'>
    #box{
	width: 100%;
	height: 100px;
	background: pink;
	p{
	    font-size: 16px;
	    line-height: 24px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
	}
    }
</style>

在這里我們只加了三行代碼
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
就完成了省略號的修飾樣式：

這只是單行顯示省略號，那多行顯示省略號怎么實現呢？下面我們一起來看：

<template>
	<div id="box">
		<p>圣誕節瘋狂世紀東方很順利的反饋矢量庫分段函數勞動法考核</p>
	</div>
</template>

<script>
</script>

<style lang='scss'>
    #box{
	width: 100%;
	height: 100px;
	background: pink;
	p{
	    font-size: 16px;
	    line-height: 24px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	}
    }
</style>

大家來看一下我們和上段代碼的區別，我們把white-space: nowrap；去掉了，因為我們要顯示多行文本顯示省略號，所以這個不換行我們就不能使用了，下面我們有添加了：
-webkit-line-clamp: 2;限制顯示文本的行數（它是webkit的私有屬性，是一個不規范屬性，必須結合下面兩個屬性一起使用才能達到效果。）
display: -webkit-box;自適應布局
-webkit-box-orient: vertical;從頂部向底部垂直布置子元素
效果圖如下：

記錄下來也是為了防止自己使用不熟練，下次忘記后還要各種百度。