<html>
<head>
<style type="text/css">
#cs{width:100px;height:50px;line-height:50px;color:#6699ff;border:1px #ff8000 dashed;overflow:hidden;text-overflow:ellipsis}
#cs2{width:200px;height:60px;line-height:20px;color:#6699ff;border:1px #ff8000 dashed;overflow:hidden;text-overflow:ellipsis}
</style>
</head>
<body>
<div id="cs">
<nobr>愛(ài)上你的微笑--文字超出顯示省略號(hào)舱沧，大家可以復(fù)制這段代碼進(jìn)行實(shí)驗(yàn)下</nobr>
</div> <br>
<div id="cs2">
</div>
</body>
</html>
white-space:nowrap; //強(qiáng)制文字顯示在一行上
overflow:hidden; //設(shè)置超出部分隱藏 使用前先設(shè)置div寬度
text-overflow:ellipsis; //溢出文本顯示省略號(hào)的詳細(xì)方法
語(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)的效果抖单。
