CSS3文本溢出顯示省略號

CCS3屬性之text-overflow:ellipsis;的用法和註意之處

語法：

text-overflow：clip | ellipsis

預設值：clip

適用於：所有元素

clip： 當對象內文本溢出時不顯示省略標記（...），而是將溢出的部分裁切掉。 
ellipsis： 當對象內文本溢出時顯示省略標記（...）。

更多參考：http://hovertree.com/h/bjaf/pr_text-overflow.htm

在使用的時候，有時候發現不會出現省略標記效果，經過測試發現，使用ellipsis的時候，必須配合overflow:hidden; white-space:nowrap; width:200px;這三個樣式共同使用才會有效果，示例代碼：

<style type="text/css">
    .test{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:360px;}
</style>

<div class="test">歡迎光臨<a href="http://hovertree.com/">何問起</a>! hovertree.com css3實現文本溢出顯示省略號。<a href="http://hovertree.net/">Midi下載</a></div>

查看效果：http://hovertree.com/h/bjaf/1hg11eg4.htm

練習題：http://hovertree.com/tiku/bjaf/curs4a42.htm

web前端彙總:http://www.cnblogs.com/jihua/p/webfront.html