用 JavaScript 把過長的字串加上省略號
這是由 [url=http://www.ruzee.com/blog/]Steffen Rusitschka[/url] 所做的 [url=http://www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with-dots-via-javascript/]Ellipsis or “truncate with dots” via JavaScript[/url]，用來把過長的字串切割 (使用 CSS) 並加入點點點...過長的字串經常遇到，怎麼在 Client 端來做呢，你可以看一下[url=http://www.ruzee.com/files/ellipsis/test.html]作者提供的範例[/url]。進一步要自己實做時，得先下載作者的這隻 [url=http://www.ruzee.com/files/ellipsis/ellipsis.js]ellipsis.js[/url]，另外作者用到了 [url=http://www.prototypejs.org/]Prototype[/url]，所以你還得下載 Prototype.js。相信很多人會跟我一樣想知道在中文的環境下，這樣的程式表現如何呢? 馬上來實做一下，以下是我測試用的 html:[code html]
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="ellipsis.js"></script>
<style>
h3 { padding:0; margin:5px 0; color:#9f2; }
.w1 { width:190px; }
.c1 { border:10px solid #444; margin:20px auto; overflow:hidden; }
.c2 { border:10px solid #777; padding:10px; overflow:hidden; background:#444; color:#fff; }
* html .c2 { height:1%; }
</style>
<div class="w1 c1"><div class="c2">
<h3 class="ellipsis">如果這是中文字也會切得很漂亮嗎?</h3>
</div></div>[/code]結果還不錯喔，以下是我看到的結果:
[img]http://lh3.google.com/hunter.wu/RsJS75_xaeI/AAAAAAAAAjw/omYeLf4mOyc/s288/ellipsis.jpg[/img]
作者這個 ellipsis.js 相當簡潔，核心部分的程式如下:[code js]function ellipsis(e) {
var w = e.getWidth() - 10000;
var t = e.innerHTML;
e.innerHTML = "<span>" + t + "</span>";
e = e.down();
while (t.length > 0 && e.getWidth() >= w) {
t = t.substr(0, t.length - 1);
e.innerHTML = t + "...";
}
}[/code]
作者表示這個程式在 IE 6, IE 7, Firefox 2, Safari 2, Opera 9 等瀏覽器都有測試過，另外授權的部分是採 MIT-style licensed，記得沒錯的話就是只要保留原著作者的資訊即可隨意使用。
頁:
[1]