文章列表中，往往会遇到标题过长而截断的问题，普通用服务器端程序截断之，同时需求考虑中文和英文的字符宽度，普通两个英文计作一个中文宽度。但这些也可以在 css 中做，尤其是在 ie 中，还可以加上省略号。
<div style="width:100px;border:1px solid red;overflow:hidden;text-overflow:ellipsis;">
  <nobr>这是长的中文标题</nobr>
  <nobr>english english english</nobr>
</div>
再看看 table 中的用法。
<table style="width:100px;table-layout:fixed;border:1px solid red;border-collapse:collapse;">
  <tr>
    <td nowrap style="overflow:hidden;text-overflow:ellipsis;">这是长的中文标题</td>
  </tr>
  <tr>
    <td nowrap style="overflow:hidden;text-overflow:ellipsis;">english english english</td>
  </tr>
</table>
说明：
overflow 当内容溢出时如何处理，值 hidden 为隐藏溢出的内容。xhtml 1.0 内容，ie、firefox 均支持。
text-overflow 若值为 ellipsis 表示内容溢出时加上省略号，若值为 clip 则只是简单的裁切。非 xhtml1.0 内容，仅 ie 6+ 支持，也就是说 firefox 中不会加上省略号。
table-layout 表格中严厉限定表格规划，不受内容的变化而撑大。
nobr 不换行，非 xhtml 1.0 内容，但 ie、firefox 均支持。
nowrap 表格中不换行，非 xhtml 1.0 内容，但 ie、firefox 均支持。
本文链接http://www.cxybl.com/html/wyzz/CSS/20120601/27375.html