CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）
?
html代碼：<div>
<p><span>CSS Web Design 我愛(ài)CSS-Web標(biāo)準(zhǔn)化 Div+css教程 - www.52css.com</span><p>
</div>
css代碼：
div{
width:200px;/*容器的基本定義*/
height:200px;
background-color:#eee;
}
/* IE下的樣式 */
p span{
display: block;
width:200px;/*對(duì)寬度的定義,根據(jù)情況修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* FF 下的樣式 */
p{clear:both;}
p span{
float:left;
max-width:175px;?? /*IE不能解釋該屬性，而FF可以*/
}
p:after{
content:"...";
}
================================================
以下是詳細(xì)過(guò)程，想繼續(xù)學(xué)習(xí)的請(qǐng)往下看，不想學(xué)的請(qǐng)直接用上面的結(jié)果就可以了。
--------------------------------------------------------------
學(xué)習(xí)篇：
今天有朋友在52css.com的留言板提出一個(gè)問(wèn)題：為什么 text-overflow:ellipsis的時(shí)候沒(méi)有任何效果呀？text-overflow是一個(gè)比較特殊的屬性，在CSS手冊(cè)中，這個(gè)屬性是這樣定義的：
語(yǔ)法：
text-overflow : clip | ellipsis
參數(shù)：
clip : 不顯示省略標(biāo)記（...），而是簡(jiǎn)單的裁切
（clip這個(gè)參數(shù)是不常用的！）
ellipsis : 當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（...）
說(shuō)明：
設(shè)置或檢索是否使用一個(gè)省略標(biāo)記（...）標(biāo)示對(duì)象內(nèi)文本的溢出。
請(qǐng)您注意，text-overflow:ellipsis屬性在FF中是沒(méi)有效果的。
示例：
div { text-overflow : clip; }
text-overflow是一個(gè)比較特殊的樣式，我們可以用它代替我們通常所用的標(biāo)題截取函數(shù)，而且這樣做對(duì)搜索引擎更加友好，如：標(biāo)題文件有50 個(gè)漢字，而我們的列表可能只有300px的寬度。如果用標(biāo)題截取函數(shù)，則標(biāo)題不是完整的，如果我們用CSS樣式text- overflow:ellipsis，輸出的標(biāo)題是完整的，只是受容器大小的局限不顯示出來(lái)罷了。
關(guān)于text-overflow屬性如何應(yīng)用，我們作如下的說(shuō)明講解：
text-overflow屬性僅是注解，當(dāng)文本溢出時(shí)是否顯示省略標(biāo)記。并不具備其它的樣式屬性定義。我們想要實(shí)現(xiàn)溢出時(shí)產(chǎn)生省略號(hào)的效果。還必須定義：強(qiáng)制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden）。只有這樣才能實(shí)現(xiàn)溢出文本顯示省略號(hào)的效果。
我們首頁(yè)建立了一個(gè)無(wú)序列表UL，里面有幾個(gè)列表項(xiàng)LI，內(nèi)部建立了列表鏈接A。我們的測(cè)試主要在LI在進(jìn)行，請(qǐng)注意觀察，看如下的三段代碼：
一、僅定義text-overflow:ellipsis; 不能實(shí)現(xiàn)省略號(hào)效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>52CSS</title>
<style type="text/css">
ul {width:300px; margin:50px auto;}
li {width:300px; line-height:25px; text-overflow:ellipsis;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li><a href="http://www.52css.com/">CSS實(shí)戰(zhàn)精萃 - Pro CSS Techniques </a>
<li><a href="http://www.52css.com/">CSS實(shí)戰(zhàn)：id是狙擊槍 class是雙刃劍 合則兩利分則兩敗</a>
<li><a href="http://www.52css.com/">CSS布局實(shí)例：CSS標(biāo)簽切換代碼實(shí)例教程</a>
<li><a href="http://www.52css.com/">Web標(biāo)準(zhǔn)：改變您的網(wǎng)頁(yè)制作思維方式 節(jié)省代碼及結(jié)構(gòu)與表現(xiàn)分離</a>
<li><a href="http://www.52css.com/">解決IE7以下版本不支持無(wú)A狀態(tài)偽類的幾種方法！</a>
<li><a href="http://www.52css.com/">CSS去除表格td默認(rèn)間距及制作1px細(xì)線表格 </a>
</ul>
</body>
</html>
二、定義text-overflow:ellipsis; white-space:nowrap; 同樣不能實(shí)現(xiàn)省略號(hào)效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>52CSS</title>
<style type="text/css">
ul {width:300px; margin:50px auto;}
li {width:300px; line-height:25px;
text-overflow:ellipsis; white-space:nowrap;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li><a href="http://www.52css.com/">CSS實(shí)戰(zhàn)精萃 - Pro CSS Techniques </a>
<li><a href="http://www.52css.com/">CSS實(shí)戰(zhàn)：id是狙擊槍 class是雙刃劍 合則兩利分則兩敗</a>
<li><a href="http://www.52css.com/">CSS布局實(shí)例：CSS標(biāo)簽切換代碼實(shí)例教程</a>
<li><a href="http://www.52css.com/">Web標(biāo)準(zhǔn)：改變您的網(wǎng)頁(yè)制作思維方式 節(jié)省代碼及結(jié)構(gòu)與表現(xiàn)分離</a>
<li><a href="http://www.52css.com/">解決IE7以下版本不支持無(wú)A狀態(tài)偽類的幾種方法！</a>
<li><a href="http://www.52css.com/">CSS去除表格td默認(rèn)間距及制作1px細(xì)線表格 </a>
</ul>
</body>
</html>
三、按52css.com的教程，即本文所講的方法，同時(shí)應(yīng)用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 實(shí)現(xiàn)了所想要得到的溢出文本顯示省略號(hào)效果：
不過(guò)請(qǐng)注意此方法適用與IE與OP瀏覽器，FF不適用！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>52CSS</title>
<style type="text/css">
ul {width:300px; margin:50px auto;}
li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li><a href="http://www.52css.com/">CSS實(shí)戰(zhàn)精萃 - Pro CSS Techniques </a>
<li><a href="http://www.52css.com/">CSS實(shí)戰(zhàn)：id是狙擊槍 class是雙刃劍 合則兩利分則兩敗</a>
<li><a href="http://www.52css.com/">CSS布局實(shí)例：CSS標(biāo)簽切換代碼實(shí)例教程</a>
<li><a href="http://www.52css.com/">Web標(biāo)準(zhǔn)：改變您的網(wǎng)頁(yè)制作思維方式 節(jié)省代碼及結(jié)構(gòu)與表現(xiàn)分離</a>
<li><a href="http://www.52css.com/">解決IE7以下版本不支持無(wú)A狀態(tài)偽類的幾種方法！</a>
<li><a href="http://www.52css.com/">CSS去除表格td默認(rèn)間距及制作1px細(xì)線表格 </a>
</ul>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
實(shí)際解決問(wèn)題篇：
（可能還不是很完美，僅供大家參考。）
單行文本的控制，以前是由程序員完成的，實(shí)現(xiàn)截字效果。
在52css.com以前的文字中，也介紹過(guò)，通過(guò)CSS也實(shí)現(xiàn)這樣的效果：
如何設(shè)置列表(li)超出部分顯示省略號(hào)？
http://www.52css.com/article.asp?id=148
CSS基礎(chǔ)：text-overflow:ellipsis溢出文本顯示省略號(hào)的詳細(xì)方法
http://www.52css.com/article.asp?id=602（上面所寫(xiě)的學(xué)習(xí)篇就是以上兩個(gè)連接的內(nèi)容）
上面的兩種方法是以前介紹給大家的。它們存在著一定的局限，只能對(duì)IE起效果，而在FF下時(shí)無(wú)效的。
在FF下面，是直接截?cái)辔淖?#xff0c;不會(huì)加上“…”。今天介紹的方法兼容IE FF，看下面的詳細(xì)介紹：
為了更符合實(shí)際，我用一個(gè)div裝起要調(diào)試的內(nèi)容,并為這個(gè)div定義一個(gè)寬度。
例如：
css代碼：
div{width:200px;}
html代碼：
<div>
<span>CSS Web Design 我愛(ài)CSS-Web標(biāo)準(zhǔn)化 Div+css教程 - www.52css.com</span>
</div>
Example Source Code [www.52css.com] span {
display:block;
width:200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
但在FF中用上面的樣式是實(shí)現(xiàn)不了的,因?yàn)?font color="#ff0000">text-overflow: ellipsis;是IE中特有的(非CSS標(biāo)準(zhǔn))。現(xiàn)在在FF下看到的僅僅只是把溢出的內(nèi)容切除了，說(shuō)到"溢出切除",這下說(shuō)到點(diǎn)子上了，在FF中實(shí)現(xiàn)就要用到非常規(guī)的方法:一個(gè)標(biāo)簽作切除內(nèi)容，再加一個(gè)標(biāo)簽作填補(bǔ)省略號(hào)用，并且加起來(lái)的長(zhǎng)度就能超過(guò)容器的寬度，本例指的就是DIV的寬度200px，實(shí)現(xiàn)的想法就是這樣。
??? 那么繼續(xù)進(jìn)一試驗(yàn)，關(guān)于切除內(nèi)容，這個(gè)已經(jīng)基本上解決了，那就來(lái)說(shuō)補(bǔ)省略號(hào)，不用JS，用CSS實(shí)現(xiàn)的話就要用到偽對(duì)象after,偽對(duì)象不懂的就要先去溫故或百度一下。先從HTML下手，為span標(biāo)簽外再加一層p標(biāo)簽（當(dāng)然你也可以加其它標(biāo)簽的）
Example Source Code [www.52css.com] html代碼：
<div>
<p><span>CSS Web Design 我愛(ài)CSS-Web標(biāo)準(zhǔn)化 Div+css教程 - www.52css.com</span><p>
</div>
我們?cè)贋檫@個(gè)P標(biāo)簽加樣式。
Example Source Code [www.52css.com] CSS：
p:after{
content:"...";
}
這樣還不行，因?yàn)?font color="#ff0000">省略號(hào)是有寬度的，這樣省略號(hào)就跳到一下行了，下面要做的就是讓span 加省略號(hào)的寬度不大于容器寬度(準(zhǔn)確的說(shuō)是相等)，并且讓省略號(hào)緊跟內(nèi)容的內(nèi)容，下面就是解決上面這些問(wèn)題的CSS樣式：
Example Source Code [www.52css.com] p{clear:both;}
p span{
float:left;
max-width:175px;
}
p:after{
content:"...";
}
這里還要補(bǔ)充的一點(diǎn)是關(guān)于p span 的寬度用了"max-width"這個(gè)屬性，IE不能解釋該屬性，而FF可以,這樣就避開(kāi)了IE對(duì)SPAN寬度的重新應(yīng)用。上面說(shuō)得有亂，歸納如下：
Example Source Code [www.52css.com] html代碼：
<div>
<p><span>CSS Web Design 我愛(ài)CSS-Web標(biāo)準(zhǔn)化 Div+css教程 - www.52css.com</span><p>
</div>
css代碼：
div{
width:200px;/*容器的基本定義*/
height:200px;
background-color:#eee;
}
/* IE下的樣式 */
p span{
display: block;
width:200px;/*對(duì)寬度的定義,根據(jù)情況修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* FF 下的樣式 */
p{clear:both;}
p span{
float:left;
max-width:175px;?? /*IE不能解釋該屬性，而FF可以*/
}
p:after{
content:"...";
}
轉(zhuǎn)載于:https://www.cnblogs.com/acis_/archive/2010/05/10/1731983.html
總結(jié)
以上是生活随笔為你收集整理的CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 商业周刊:摩托罗拉下注Android 不
- 下一篇： 快递费便宜了 送一件包裹究竟多少钱？成本