css實(shí)現(xiàn)文字過(guò)長(zhǎng)顯示省略號(hào)的方法
因?yàn)榫W(wǎng)頁(yè)排版的需要，有些地方需要過(guò)長(zhǎng)的問(wèn)題加上省略號(hào)。比如：標(biāo)題限制20個(gè)中文的寬度，超出的就用省略號(hào)代替。之前會(huì)使用程序截取的方法，不過(guò)使用css來(lái)截取更有利于SEO。跟隨小編去看看吧！
下面就介紹一下具體的使用方法：
<p class="title">當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記</p>
這是一個(gè)例子，其實(shí)我們只需要顯示如下長(zhǎng)度：
css實(shí)現(xiàn)網(wǎng)頁(yè)中文字過(guò)長(zhǎng)截取...
title class應(yīng)該這樣寫：
.title{ width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
說(shuō)明：
1、寬度一定要設(shè)置，可以根據(jù)實(shí)際需求調(diào)整。
2、white-space:nowrap是禁止文字折行。
3、text-overflow表示當(dāng)文本溢出時(shí)是否顯示省略標(biāo)記，有兩個(gè)值：
clip：不顯示省略標(biāo)記（...），而是簡(jiǎn)單的裁切。
ellipsis：當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（...）
4、overflow:hidden表示溢出內(nèi)容為隱藏。
示例效果圖：
#FormatImgID_0#
示例代碼：
<!DOCTYPE html PUBLIC "-/pic/pic/pic/pic/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="/pic/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>
<p class="test_demo_clip">
不顯示省略標(biāo)記，而是簡(jiǎn)單的裁切條
</p>
<h2>text-overflow : ellipsis </h2>
<p class="test_demo_ellipsis">
當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記
</p>
</body>
</html>
【css實(shí)現(xiàn)文字過(guò)長(zhǎng)顯示省略號(hào)的方法】相關(guān)文章：
css實(shí)現(xiàn)鼠標(biāo)滑過(guò)改變文字的方法01-15
用單div實(shí)現(xiàn)CSS繪圖方法09-25
CSS3實(shí)現(xiàn)選項(xiàng)卡切換的方法02-24
如何實(shí)現(xiàn)CSS右對(duì)齊08-21
word文檔中修改文字顯示方向的方法12-07
關(guān)于java讀取文件顯示進(jìn)度條的實(shí)現(xiàn)方法01-03
CSS簡(jiǎn)寫方法總結(jié)10-02
Word文檔中隱藏和顯示隱藏文字的方法12-10