因為網頁排版的需要，有些地方需要過長的問題加上省略符號。比如：標題限制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表示溢出內容為隱藏。
樣本效果圖：
#FormatImgID_0#
範例程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-overflow</title>
</head>
<body>
<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>
<h2>text-overflow : clip </h2>
<div class="test_demo_clip">
不顯示省略標記，而是簡單的裁切條
</div>
<h2>text-overflow : ellipsis </h2>
<div class="test_demo_ellipsis">
當對象內文本溢出時顯示省略標記
</div>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
