目前位置: 首頁 > Boostrap4響應式模板 > 8、用CSS處理(截斷)過長的文字

有時候文章標題很長，或只想顯示一部份內容於特定頁面，例如首頁的簡介，雖然說程式語言(ASP、PHP、JAVA...)可以擷取指定長度文字，但常因為中英文與字寬會有差異，造成相同字數卻顯示不同行數，這對排版來說是一個困擾...

 

擷取文章標題長度為26個字的結果是長度不一

使用CSS來控制文字是以容器的寬度為主，所以顯示的字數不一定相同但卻總是填滿容器寬度，而且不管是單行或多行，中文或英文都能控制自如:

/* 單行文字縮略 */
.text-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}
.text-truncates {
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden; 
}
/* 2行文字縮略 */
.text-truncate2 {
	-webkit-line-clamp: 2;
	height: 3rem;
}
/* 3行文字縮略 */
.text-truncate3 {
	-webkit-line-clamp: 3;
	height: 4.5rem;
}

將上列代碼加入CSS中，單行文字縮略使用 class="text-truncate"，2行文字縮略使用 class="text-truncates text-truncate2"，3行文字縮略使用 class="text-truncates text-truncate3"，就是那麼簡單，例如ecshop的最新文章:

<div class="info">
	
	<div class="text-truncate">
		<a href="{$article.url}" class="d-block"> <i class="fas fa-book-reader"></i> {$article.short_title} </a> 
	</div>
	<div class="text-truncates text-truncate3">
		{insert name="GetImageSrc" id=$article.id type="content"}
	</div>
</div>

相關文章