DIV CSS 佈局教程網

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>

上面的width屬性根據實際需要填寫，其它樣式是固定的。

效果如下：
歡迎光臨何問起! hovertree.com css3實現文本溢出顯示省略號。Midi下載
練習題：http://hovertree.com/tiku/bjaf/curs4a42.htm

轉載請注明：http://hovertree.com/h/bjaf/1hg11eg4.htm