The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何顯示固定寬度的 Label, 超過會顯示 ... ( Part 2 )

📅 2009/04/21 21:24 📁 Web, JavaScript, CSS

還記得我之前寫的一篇【如何顯示固定寬度的 Label, 超過會顯示 ...】文章嗎？當時寫說此效果只在 IE 有效，不過最近發現了一篇文章說明如何透過 jQuery Ellipsis plugin 幫你也在 Firefox 也出現“...”符號喔!!

我們都知道在 IE 中使用 CSS 的 text-overflow 屬性可以輕易的達成當顯示文字或一個區塊時可以自動截斷過長的文字顯示，並且會自動出現“...”符號（如下圖示）。

CSS 的 text-overflow 屬性效果 (IE)

但是同樣的效果卻在 Firefox 中會直接截斷（如下圖示）

CSS 的 text-overflow 屬性效果 (Firefox)

因為這樣的效果對於版面配置非常具有彈性，因此我們很多地方都會用到這個技巧，只是在 Firefox 中就難免覺得有點美中不足。

其實 text-overflow 屬性所呈現的 ellipsis 效果在 CSS3 才規範進去了，只是 IE 實做的比較早而已，目前有完成實做 CSS3 的瀏覽器也只有Safari 與 Opera 而已。

假設你原本的 CSS 定義如下（跟我之前文章的例子一模一樣）：

.box2 {
    margin: 0 20px;
    text-overflow: ellipsis;
    overflow:hidden;
    white-space:nowrap;
    border: 1px dashed #333;
    width: 300px;
    padding: 10px;
}

然後再載入 jQuery 與 jQuery Ellipsis plugin

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.text-overflow.js"></script>

之後在寫一段 JavaScript 就可以將原本套用 box2 這個 CSS 類別的標籤修改成有“...”符號的畫面了。

$(function() {
	$(".box2").ellipsis(true);
});

各位如果想用 IE 與 Firefox 線上測試這個效果，可以連到以下網址測試：

http://dl.getdropbox.com/u/534786/index.html

Ellipsis Test Page

相關連結

留言評論