在制作一个推荐职位的表格时，遇到单元格宽度固定且内容超出时需显示省略号的问题。通过设置`overflow:hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;`未能达到预期效果。为保持表格结构，添加`table.list{width:730px;table-layout:fixed;}`解决了Chrome、Firefox和Maxthon的显示问题。但在IE中，中文显示不正常。采用`<nobr>`标签解决IE下中文显示，实现各浏览器中英文都能正确显示，尽管`<nobr>`在HTML5中已不推荐使用。
根据要求要做一个推荐职位的表格，其中涉及到table TD的宽度和换行，做下笔记，以备后用。
首先看下效果：
要求：表格单元格宽度固定，内容超出时截断并用省略号代替，考虑中英文。
刚开始时直接用了：overflow:hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;效果如下：
娘的，一点作用没起，后来又把td的display:block后会出瑞省略号，但表格结构乱了，得不偿失。
于是，给表格加了个：table.list{width:730px;table-layout:fixed;}
chrome、ff、maxthon效果如下：
ok了，那ie呢？看下：
真该死，ie下英文可以了，但中文有点调皮。在网上找了很久，找到了一个方法，只不过要多用一个html标签：...
html代码如：
java程序员java程序员java程序员java程序员java程序员这下ie的效果如下图：
可以看出，各浏览器在中英文时都能正确显示。不过可惜的是nobr在html5中好像没看到，唉！！！
扫一扫
478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
