css實現文字過長顯示省略號的方法

洲哥發表於2018-06-06
CSS

因為網頁排版的需要，有些地方需要過長的問題加上省略號。比如：標題限制20箇中文的寬度，超出的就用省略號代替。之前會使用程式擷取的方法，不過使用css來擷取更有利於SEO。

下面就介紹一下具體的使用方法

<div class="title">當物件內文字溢位時顯示省略標記</div>
複製程式碼

這是一個例子，其實我們只需要顯示如下長度：

css實現網頁中文字過長擷取...

title class應該這樣寫：

.title{ 
    width:300px; 
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis;
}
複製程式碼

##說明：

1、 寬度一定要設定，可以根據實際需求調整。

2、white-space:nowrap是禁止文字折行。

3、text-overflow表示當文字溢位時是否顯示省略標記，有兩個值：

clip：不顯示省略標記（...），而是簡單的裁切。

ellipsis：當物件內文字溢位時顯示省略標記（...）
複製程式碼

4、overflow:hidden表示溢位內容為隱藏。

示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		  .test_demo_clip{
		  	text-overflow:clip; 
		  	overflow:hidden; 
		  	white-space:nowrap; 
		  	width:200px; 
		  	background:#ccc;
		  }
		  .test_demo_ellipsis{
		  	text-overflow:ellipsis; 
		  	overflow:hidden; 
		  	white-space:nowrap; 
		  	width:200px; 
		  	background:#ccc;
		  }
	</style>
</head>
<body>
	<h2>text-overflow : clip </h2>
	<div class="test_demo_clip">
	  不顯示省略標記，而是簡單的裁切條
	</div>
	<h2>text-overflow : ellipsis </h2>
	<div class="test_demo_ellipsis">
	  當物件內文字溢位時顯示省略標記
	</div>
</body>
</html>
複製程式碼

相關文章