文章列表中,往往会遇到标题过长而截断的问题,一般用服务器端程序截断之,同时需要考虑中文和英文的字符宽度,一般两个英文计作一个中文宽度。但这些也可以在 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 均支持。