§ ITPOW >> 文档 >> CSS

CSS 解决中英文混合标题的截取问题

作者:vkvi 来源:ITPOW(原创) 日期:2008-5-3

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

相关文章