上一篇
下一篇
超過寬度顯示省略號(無js全兼容)
作者:Admin 日期:2009-03-12
辦法有點怪，讓我們先看看效果：
HTML代碼
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
大家可以試試將li標籤的寬度修改後進行測試。
接下來有興趣的朋友可以看看原理的解釋：
思路：
我們要達到的效果是：當「字符超過額定寬度」，則「顯示三個小點」。
=> 當「字符超過額定寬度」，對於頁面來說可能發生的一個改變就是：換行！
=> 換行將導致該範圍的底線降低。
=> 那麼，我們的目的則可以換算成：該範圍的底線降低時顯示三個小點。
英文句子和連續字母/數字測試效果在非IE下欠佳（因為不自動換行），可以配合js來完善。
PS. 由於使用的附件作為圖片，使用其他瀏覽器測試時，保證登錄才能看到完整效果。
點此下載。
HTML代碼[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
大家可以試試將li標籤的寬度修改後進行測試。
接下來有興趣的朋友可以看看原理的解釋：
思路：
我們要達到的效果是：當「字符超過額定寬度」，則「顯示三個小點」。
=> 當「字符超過額定寬度」，對於頁面來說可能發生的一個改變就是：換行！
=> 換行將導致該範圍的底線降低。
=> 那麼，我們的目的則可以換算成：該範圍的底線降低時顯示三個小點。
英文句子和連續字母/數字測試效果在非IE下欠佳（因為不自動換行），可以配合js來完善。
PS. 由於使用的附件作為圖片，使用其他瀏覽器測試時，保證登錄才能看到完整效果。
點此下載。
文章來自: 
引用通告: 
Tags: 評論: 0 | 引用: 0 | 查看次數: 1370
發表評論
