这个标题其实已经是一个老生常谈的问题了。很多时候，比如网站最基本的文章列表，标题会很长，而显示列表的区域宽度却没有这么宽，这时候最正常的做法就是让超出宽度的部分文字用省略号(…)来表示。通常做法是网站后台程序截取一定的字符然后输出到前台显示或者前台用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个字节 | 咖啡不苦