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

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

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

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

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

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

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

title class應該這樣寫:

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

<html xmlns="">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>text-overflow</title>

</head>

<body>

<style type="text/css">

_demo_clip{text-overflow:clip; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;}

_demo_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;}

</style>

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

<p class="test_demo_clip">

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

</p>

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

<p class="test_demo_ellipsis">

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

</p>

</body>

</html>