我们在浏览网页的时候，常常会看到某些网站的文章标题由于过长而只显示一部分，另一部分用省略号来表示，这是为了防止标题过长而导致页面排版不好看。那么这个文章标题省略号是如何实现的呢？目前常见的方法是通过动态语言程序来控制，判断标题的长度，然后截取部分来显示，其余的用省略号显示，这样往往在英文和中文的长度上难以判断。今天在网上看到可以用 CSS 来实现，效果还不错，拿来分享。
CSS 实现截断过长标题文字的原理非常简单，就是设置一个宽度，然后超过这个宽度值的内容就隐藏，并用省略号来显示。用到的就是 text-overflow:ellipsis，在 IE 下显示是正确的，超出部分为省略号 ...，而在 Firefox 中超出部分却是裁切掉了，有的文字就显示一半，很不好看，这是因为 Firefox 不支持 text- overflow:ellipsis 属性。为了让 Firefox 中也能显示省略号，所以要外加一个 xml 文件。下面直接给出兼容 IE 和 Firefox 的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用CSS截断过长标题文字的方法-HTMer</title>
<style type="text/css">
<!--
.htmer{
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis; /*兼容IE*/
-moz-binding: url('ellipsis.xml#ellipsis'); /*兼容Firefox，调用ellipsis.xml文件，注意ellipsis.xml文件路径*/
}
-->
</style>
</head>
<body>
<div class="htmer">使用CSS截断过长标题文字的方法-HTMer</div>
</body>
</html>
ellipsis.xml 文件源代码：
<?xml version="1.0"?>
<bindings
xmlns="http://www.mozilla.org/xbl"
xmlns:xbl="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
<binding id="ellipsis">
<content>
<xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
</content>
</binding>
</bindings>
（text-overflow:ellipsis; 在 IE、Chrome 中有效，在 Firefox 和 Opera 中无效。-moz-binding 这句使得在 Firefox 中也有相同效果，但注意 xml 文件不能少，否则反而显示不出文字。ITPOW编辑注）
