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

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

　　因為網頁排版的需要，有些地方需要過長的問題加上省略號。比如：標題限制20個中文的寬度，超出的就用省略號代替。之前會使用程序截取的方法，不過使用css來截取更有利于SEO。跟隨小編去看看吧！

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

　　<p class="title">當對象內文本溢出時顯示省略標記</p>

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

　　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">

　　<head>

　　<title>text-overflow</title>

　　</head>

　　<body>

　　.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>

　　不顯示省略標記，而是簡單的裁切條

　　</p>

　　<h2>text-overflow : ellipsis </h2>

　　當對象內文本溢出時顯示省略標記

　　</p>

　　</body>

　　</html>

【css實現文字過長顯示省略號的方法】相關文章：