技術標籤：css

原本的樣式：

<div class="test-text">
	<div class="text-content">this is a test, this is a test, this is a text.</div>
</div>

.test-text {
    width: 130px;
    background: aliceblue;
    margin: 200px;
}

圖示：

單行文字溢位：

.text-content {
	// 文字長度超出限定寬度，則隱藏超出的內容
	overflow
 
: hidden;
	// 設定文字在一行顯示，不能換行
	white-space: nowrap;
	// 當文字溢位時，顯示省略符號來代表被截斷的文字
	text-overflow: ellipsis;
}

圖示：

多行文字溢位省略：

.text-content {
	// 用來限制在一個塊元素顯示的文字的行數，2表示最多顯示2行。為了實現該效果，它需要組合其他的WebKit屬性
	-webkit-line-clamp: 2;
	// 和1結合使用，將物件作為彈性伸縮盒子模型顯示 
	display: -webkit-box;
	// 和1結合使用 ，設定或檢索伸縮盒物件的子元素的排列方式
	-webkit-box-orient
 
: vertical;
	// 文字溢位限定的寬度就隱藏內容
	overflow: hidden;
	// 多行文字的情況下，用省略號“…”隱藏溢位範圍的文字
	text-overflow: ellipsis;
}

圖示：