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

wmh

這是由 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，記得沒錯的話就是只要保留原著作者的資訊即可隨意使用。