舞山林。超人的部落格

在網頁資料顯示時因為顯示區域的問題，經常會需要截取特定長度的字串，例如顯示討論標題的時候，這個標題在資料庫內部可能是100個字元，但是顯示的時候因為顯示寬度的考量，可能只能顯示大約30個字的寬度，照理來講這樣很簡單，只要用截取字串長度的PHP函數做一些處理就可以了，但是因為中文與英文一個字的寬度差很多，光算字數來截取就會出現以下的模樣....

▼一個英文與中文的寬度差很多....

使用以下的CSS語法來限制顯示的長度，並且在切割的後方加入 ... 符號

<DIV STYLE="width: 308px; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; ">

     要輸出顯示的資料要輸出顯示的資料要輸出顯示的資料要輸出顯示的資料要輸出顯示的資料

</div>

大致解釋一下:

width: 308px -> 這是要顯示的寬度，視你的網頁欄位顯示寬度而定。

overflow: hidden -> 這參數是隱藏溢出範圍的內容，如果沒有加上overflow: hidden而且顯示的字串寬度超過width參數的話，寬度會被撐開!

text-overflow: ellipsis -> ellipsis參數會在被截掉長度的字串後面加上...省略符號。

white-space:nowrap -> nowrap參數會將字串連續空白縮為1個，跳行字元視為空白，超過寬度不會跳行，如果沒有加上white-space:nowrap而且顯示的字串寬度超過width參數的話，顯示的資料將會換行繼續顯示，如果你用height將顯示區塊限制為只有看到一行字，看起來似乎正常，但是超長的字串也是看不到...省略符號。

▼使用CSS來做顯示寬度的限制，與上圖比較就可以看出差異