這個標題其實已經是一個老生常談的問題了。很多時候，比如網站最基本的文章列表，標題會很長，而顯示列表的區域寬度卻沒有這麼寬，這時候最正常的做法就是讓超出寬度的部分文字用省略號(…)來表示。通常做法是網站後台程序截取一定的字元然後輸出到前台顯示或者前台用javascript截取一定的字元，但是通過控制字數來截取的話還是存在一個大問題的，因為中文和英文的字元寬度問題，這個字數不好控制，而且通用性較差。那麼有沒有更好的方法呢，比如直接用CSS來解決的，當然是有的。
這個標題其實已經是一個老生常談的問題了。很多時候，比如網站最基本的文章列表，標題會很長，而顯示列表的區域寬度卻沒有這麼寬，這時候最正常的做法就是讓超出寬度的部分文字用省略號(…)來表示。通常做法是網站後台程序截取一定的字元然後輸出到前台顯示或者前台用javascript截取一定的字元，但是通過控制字數來截取的話還是存在一個大問題的，因為中文和英文的字元寬度問題，這個字數不好控制，而且通用性較差。那麼有沒有更好的方法呢，比如直接用CSS來解決的，當然是有的。
在一個列表裡，有時候沒必要把過長的文本進行隱藏。
正常時可以固定 li 的高度並且 overflow: hidden ，mouse over 時則 height: auto;z-index: 99;overflow: visible;
也就是當滑鼠在元素上時則顯示全部內容。
@bolo 縱向的其實也可以用文中的js來實現，至於你說的過長的文本，萬一很長，你滑鼠mouseover的時候顯現也是挺奇怪的吧
@Leeiio 如果是列出標題的話，一般都不會有過長的現象。
PS：大雄加我GT吧，到後台看我郵件地址。
@bolo
mouseover 的使用 popup 會比較好吧, 比起強硬更改大小要好
@Chris 我說的有點不準確，應該是hover的時候，完全用css實現
@bolo 加了，你那邊沒反映咩
收了，等會去試試我的那些個標題去
我目前的做法：
php echo mb_strimwidth(get_the_title(), 0, 34, ‘…’);
@游神 🙄 感覺像這樣在源頭控制比較好~~~
@MOPVHS
是的 我會抓緊折騰折騰
複製PHP代碼竟然無聲無息就給我屏蔽了，邪惡的淫
@游神 不是屏蔽了，是執行了。
原來 WebKit 也支持text-overflow 啊。
@任平生 是啊，不過text-overflow目前在w3c文檔里已經被抹掉了，不知道為何。
Pingback: Tweets that mention 溢出文本顯示省略號,關於text-overflow:ellipsis的那些事 - Leeiio Chaos Made. -- Topsy.com
firefox居然不支持 ❓ 還是overflow: hidden吧
@winy overflow hidden只剩下半截字還是挺奇怪的。
路過，學習啦。
leeiio，你博客上的 JavaScript 有點問題，外部鏈接點擊之後會打開兩個。
$("a[rel*='external']").click(function() {window.open(this.href);
return false;
});
應該是少了一句return false;
@LOO2K 感謝提醒，不過不是你說的問題，是事件重複綁定的問題，造成了兩次事件所以彈出了兩個窗口。
之前也研究過這個問題 不過最後放棄了。
while() 那段還可以再優化, 現在這個例子根據截斷的不同, 循環次數也不一樣
@Chris 呃，演算法沒學好。
學的不是很好使，應該放個demo出來，有個參照。
@行者 demo就在文中。
呵呵，我一般喜歡讓他們到下面去 ~
word-break: break-all;
word-wrap: break-word;
😳 😳
@小邪 如果是我截圖中的左側這種，就沒法讓他換行顯示了。
@Leeiio _(￣0￣)_[哦~]，也是哈，嘿嘿，木有發現 ~
javascript 中調用的寫法怎麼寫，恕我愚笨。 🙂
@行者 調用什麼？
@Leeiio
$(document).ready(function(){
$(“p”).ellipsis(200);
});
這樣調用不行，應該怎麼寫?
曾經糾結了一整晚的問題終於到你頭上了。
你寫的辦法我當時都自己摸索出來了，除了那個噁心的XUL…
最後還是PHP後台截斷最省事…
不過，最近一個項目里正巧用到了 text-overflow: ellipsis;
真巧…
@disinfeqt 呃，因為我們的doit後台不會處理這種問題的，都是前端問題的，所以當時糾結這個了好久，其實無非就是糾結在firefox下的問題，面對ellipsis問題它就是個異類。然後一直拖著沒時間寫博客分享…
嗯那個JQ小插件留著備忘了，不錯不錯~ 😳
那個，火狐下我看到haha了。。 😮
@QiQiBoY 不可能，你看的是上面的哈哈，下面的哈哈我發現頁面在firefox下有問題，一整段的演示效果都沒顯示出來。。
今天處理等高問題, 發現離線 el 無法讀取 offsetHeight, 想起你這裡有用到 cloneNode 和 t.width(), 以為你有解決方案
看了半天發現也是和我一樣… visibility: hidden 後附加到 DOM 里… ❓
@Chris 呃，離線el？
希望以後全人類都來用chrome吧。
我用了那個xml文件，在火狐里居然顯示是粗體字，其它正常，這是怎麼回事呢？
@mm 不可能的，請檢查自己的css
我的代碼是這樣的：
#box #piaofu #piaofu-xia #piaofu-xia-xia #piaofu-xia-xiaduan li a {
font-size: 12px;
font-weight: normal;
color: #FFF;
display: block;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
-moz-binding: url(‘ellipsis.xml#ellipsis’);
}
字體的大小和粗細都定義了的，在IE和OPREA下顯示正常，但是在FF下字體大小正常，但是就是顯示粗體。
@mm 先試試給font-weight: normal;加上!important變成font-weight: normal !important;，這個xml文件不會造成字體變粗的，有演示頁面么
是字體的繼承問題，居然是繼承最根部的字體定義。呵呵
就是用了這個XML文件，FF的字體會自動繼承最根部的定義，而IE和OPERA不字體的根部定義是什麼，都必須在該子層中重新定義
就是用了這個XML文件，FF的字體會自動繼承最根部的定義，而IE和OPERA不管字體的根部定義是什麼，都必須在該子層中重新定義
再次感謝，感謝，再感謝
此文寫的不錯，學習了。。。
已拜讀,已收藏,已RSS
XML無法載入完成時，整行文字無法顯示。該方法解決的那行文字，無法複製！不推薦使用。
喲，學習了我
國內火狐用戶感覺還是蠻少的，大部分都是開發人員在用，項目中我覺得不必要針對火狐來做這麼多代碼處理。
不過方法很不錯，贊！ 😛
學習了 😳
這麼多方法，學習了
逐個縮短字元寬度……汗死……
這明顯該用二分法的。
更高效率的 jQuery 插件
http://yue.st/notes/code/js/ellipsis.zh.html
另外，ff4.0上已經可以看到那個haha了
還有，你的博客是不是有頭像緩存啊，怎麼我的頭像沒更新，我早在 gravatar 更新過了……
火狐 7+ 支持 ellipssis 啦～
我一般都設置好固定的width，超過部分就overflow：hidden了
如何加 … 字元？
9aisee: OOPS 學習！！
文本多行的時候，是不是只能用js來實現？
同問啊~多好的各位有什麼好辦法么？
這裡有個純css的多行文本的解決方法, 我沒看太懂, 不過你們可以看一下, 然後教教我它什麼原理:
http://jsfiddle.net/barney/bmNvs/
這裡有個純css的多行文本解決方法, 你可以看一下:
http://jsfiddle.net/barney/bmNvs/
Pingback: 顯示12個位元組 | 咖啡不苦