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

8、用CSS處理(截斷)過長的文字 超大 稍大 微大

發表於: 2020-10-13 最後更新: 最後更新時間:2020-10-13

有時候文章標題很長,或只想顯示一部份內容於特定頁面,例如首頁的簡介,雖然說程式語言(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>
您必須先 登入 註冊 才能下載附件!
對於本站文章有任何問題或建議歡迎到 : 討論區寫信給我
本站提供ECSHOP技術支援, 是網路開店最佳選擇 ,最後更新時間: 最後更新時間:2020-10-13