###單行文字溢位隱藏

div{
    width: 200px;
}
p{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space:nowrap;
}

效果圖如下：

###多行文字溢位隱藏

• 只能相容chrome 和大部分的移動端

div{
	width: 150px;
}
p{
  	overflow: hidden;
  	text-overflow: ellipsis;
  	white-space:wrap;
  	display:-webkit-box;
  	-webkit-box-orient:vertical;
  	-webkit-line-clamp:3;
  	//利用webkit的私有屬性
}
 

效果圖如下：

• 利用 margin 負值來實現多行文字溢位

//html
<div class="text_overflow"> 
	<div class="text_con">這是一段比較長的文字，用來測試是否文字溢位時會用省略號顯示。這是一段比較長的文字，用來測試是否文字溢位時會用省略號顯示。這是一段比較長的文字，用來測試是否文字溢位時會用省略號顯示。
	</div> 
	<div class="text_dotted">…</div> 
</div>

//css
.text_overflow{
	width:24em; 
	height:3.9em; 
	overflow:hidden; 
	zoom:1;
} 
.text_overflow .text_con{
	float:left; 
	height:3.9em; 
	margin-right:3em; 
	overflow:hidden;
} 
.text_overflow .text_dotted{
	width:3em; 
	height:3.93em; 
	float:right; 
	margin-top:-1.3em;
}
 

效果圖如下：

這個方法是從張鑫旭大神的一篇文章看到的，直接放出連結。 原理也很簡單，在容器中放置一段文字和點點點，使點點點浮動同時，設定margin-top為負值時，點點點就會上去。但是要注意文字的高度要和容器高度相同，且文字需要設定margin-right，數值等於點點點的寬度，相當於給點點點預留出位置