返回列表 發帖

用 JavaScript 把過長的字串加上省略號

這是由 Steffen Rusitschka 所做的 Ellipsis or “truncate with dots” via JavaScript,用來把過長的字串切割 (使用 CSS) 並加入點點點...

過長的字串經常遇到,怎麼在 Client 端來做呢,你可以看一下作者提供的範例。進一步要自己實做時,得先下載作者的這隻 ellipsis.js,另外作者用到了 Prototype,所以你還得下載 Prototype.js。相信很多人會跟我一樣想知道在中文的環境下,這樣的程式表現如何呢? 馬上來實做一下,以下是我測試用的 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>
結果還不錯喔,以下是我看到的結果:


作者這個 ellipsis.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 + "...";
  }
}
作者表示這個程式在 IE 6, IE 7, Firefox 2, Safari 2, Opera 9 等瀏覽器都有測試過,另外授權的部分是採 MIT-style licensed,記得沒錯的話就是只要保留原著作者的資訊即可隨意使用。

返回列表 回復 發帖