关于文字内容溢出用点点点(...)省略号表示

前言：

在实际的项目中，由于文字内容的长度不确定性和页面布局的固定性，难免会出现文字内容超过div（或其他标签，下同）区域的情况，此时比较好的做法就是当文字超过限定的div宽度后自动以省略号（…）显示，这样，按照习惯，人们都会知道这儿有文字被省略了。css中有个属性叫做 text-overflow:ellipsis; 配合其他一些属性可以实现IE,chrome,safria浏览器下文字溢出点点点省略号显示，在加上opera浏览器的私有属性 -o-text-overflow:ellipsis; 就目前而言，可以实现Firefox浏览器以外的所有主流浏览器的文字溢出点点点省略号显示。

而本文将提供多种兼容性上佳的文字溢出点点点省略号显示的方法，而里面不少方法就是自己想出来的。有使用外部辅助文件的，有纯粹的css方法的，还有使用jQuery方法的。每种方法都提供各个浏览器下的截图验证，提供实例页面，提供部分源文件，都是值得信赖的方法，希望对您有所帮助。文章中穿插了些牢骚，您可以跳过，与本文主体不是很相关。

目录：

1. 常规css方法——使Firefox以外主流浏览器文字溢出省略号表示
2. 使用ellipsis.xml文件使Firefox支持文字溢出后点点点省略号表示
3. 我自己想出来的方法——margin负值定位法

1、常规css方法——使Firefox以外主流浏览器文字溢出省略号表示

下图为此常用方法在各个浏览器下的表现：

在IE6浏览器下、IE7浏览器下、chrome谷歌浏览器下、Safari浏览器下、opera浏览器下

Firefox火狐浏览器下

可以看到，仅在Firefox火狐浏览器下无法实现文字溢出省略号表示，其文字直接从中间咔掉了。综合考虑代码成本，表现效果，我个人觉得这样子已经算是不错的了，追求完美和实际效益之间要追求一定的平衡。如果页面上很多文字都溢出，则需要寻求更兼容的方法，要是偶尔会出现文字溢出的情况，就是用这类css代码就足够了，单层标签，简单实用：

.zxx_text_overflow{
  width:27em; 
  white-space:nowrap;
  text-overflow:ellipsis;
  -o-text-overflow:ellipsis; 
  overflow:hidden;
}

2、使用ellipsis.xml文件使Firefox支持文字溢出后点点点省略号表示

这是老外提供的一种方法，使用Firefox的私有属性调用一个XML文件，可以使Firefox火狐浏览器下文字溢出后以省略号的形式显示。右键另存为下载：ellipsis.xml
　　调用方法如下： -moz-binding:url(‘ellipsis.xml#ellipsis’); 跟css样式写法一致。
　　需要注意的是：此XML文件不支持向上路径的访问，也不支持绝对路径的访问。也就是说此XML文件需要放在调用文件（css文件，或HTML文件）的同目录下或下一级目录下，不能向上访问。原因我是不清楚的，我反复试验，都证明如此。
下图为使用此XML文件后Firefox浏览器下的表现：

Firefox火狐浏览器下

可以清楚地看到溢出的文字部分用点点点省略号表示了。再结合上面的css样式，就可以实现所有主流浏览器下的单行文字溢出用省略号表示了。css表示如下：

.zxx_text_overflow{
  width:27em; 
  white-space:nowrap; 
  text-overflow:ellipsis; 
  -o-text-overflow:ellipsis; 
  -moz-binding:url('ellipsis.xml#ellipsis'); 
  overflow:hidden;
}

例如在实例页面中，此段css是写在页面上的，所以ellipsis.xml文件是放在HTML文件同目录下的。

3、我自己想出来的方法——margin负值定位法

这里先上代码，HTML部分：

<div class="zxx_text_overflow" >
     <div class="zxx_con" >这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。</div>
     <div class="zxx_dotted" >…</div>
 </div>

css部分：

.zxx_text_overflow{width:24em; height:1.3em; overflow:hidden; zoom:1;}
.zxx_text_overflow .text_con{float:left; height:1.3em; margin-right:3em; overflow:hidden;}
.zxx_text_overflow .text_dotted{width:3em; height:1.31em; float:right; margin-top:-1.3em;}

结果在不同浏览器下的表现如下（IE6，IE7以IE6示例，Firefox和chrome以Firefox示例）：

IE6下，IE7同类型，表现一致

Firefox浏览器下表现

opera浏览器下表现

Safari浏览器下表现

　　简要说明：此方法兼容IE6，IE7（IE8未测过），Firefox，chrome，Safari，opera浏览器。没有hack，没有生僻的css样式。文字短时，没有省略号，文字溢出时就出现省略号。可以说是相当不错的一个方法。原理也很简单：当文字内容足够长时就把隐藏在上面的省略号层给挤下来了。关键就是点点点所在div层的高度的绝对值要比其margin的绝对值大那么一点点。 如果您不习惯用em做单位，直接换作px就可以了，效果是一样的。