運用 CSS 讓過長文字以省略符號取代

在某種情況下, 我們可能需要把一段過長的文字從中截斷, 並在截斷處以省略符號 (...) 取代, 表示這段文字其實尚未結束, 只是被省略。如果你的文字是從資格庫中取得, 那麼你可以從資料庫取出時就載斷字串並加上簡略字元後傳回; 然而, 如果你不想把原始資料真的截斷 (若依上文, 你取出的資料是已經被截斷的, 除非重新讀取, 否則勢必拿不到完整的版本), 那麼你可以嘗試我現在要提供的方法, 那就是以 CSS 設定, 達到相同的效果。

請先來看看程式:

<style>
   .AutoSkip {
      overflow:hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
   }
</style>
<html>
<body>
   <div class="AutoSkip" style='width:600px;'>
     在某種情況下, 我們可能需要把一段過長的文字從中截斷, 並在截斷處以省略符號 (...) 取代,
     表示這段文字其實尚未結束, 只是被省略。如果你的文字是從資格庫中取得, 那麼你可以參考我寫的
     「[SQL Puzzle] 載斷字串並加上簡略字元後傳回」一文, 當你取出資料時, 就把文字截斷。
   </div>
</body>
</html>

雖然在 <div> 段落中夾著一段很長的文字, 但如果你實際執行上述程式, 你會發現在 600px 處文字確實被截斷, 而且自動加上了省略符號, 變成了如下的樣子:

在某種情況下, 我們可能需要把一段過長的文字從中截斷...

當然, 這個結果和在資料庫中取出時就截斷文字看來有一樣的效果, 但實際上, 採用 CSS 的方法其實並沒有改動到文字; 它只是讓你覺得文字看起來好像被截斷而已。

運用這種方法, 無疑是給了程式設計師更大的彈性, 讓你在組版面時具有更靈活的空間。比方說, 由於資料並沒有被真的截斷, 所以, 假設你打算把資料繫結到 GridView 容器中, 限於版面, 你必須把過長的文字截斷, 但是你另一方面卻又可以把完整的文字繫結到 tooltip 裡面。如果採用第一種做法 (在讀取資料時即予截斷), 就無法做到這一點。

在上述程式中, 我所示範的技巧全部都在 AutoSkip 這個樣式裡了, 所以老實說也沒有什麼太大的學問; 照著寫就對了!

不過經過測試, IE8 與 Chrome 4.0 都可以正常顯示, 在 FireFox 上卻不會出現簡略字元, 而是硬生生把字串剪斷了, 如果那個地方是中文字, 有可能只顯示一半, 不甚美觀。

 

转自：http://www.dotblogs.com.tw/johnny/archive/2010/01/25/13288.aspx