兼容IE6、7、8和FF的省略号

最新推荐文章于 2025-12-29 22:13:27 发布

原创最新推荐文章于 2025-12-29 22:13:27 发布 · 367 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ie #binding #html #encoding #文档 #url

本文介绍如何使用CSS实现文本溢出时显示省略号的效果，适用于Firefox浏览器，并提供了一个具体的示例代码。此外，还提到了不同浏览器如IE和Firefox下实现此效果时的差异。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <BODY> <style type="text/css"> #wrap{ width:560px; border:1px solid #333; /* 以下为控制省略号的样式 */ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; /* 以下是FF特有属性，需要XUL文件支持 */ -moz-binding:url("ellipsis.xml#ellipsis"); } </style> <div id="wrap">Always in center!Always in center!Always in center!Always in center!Always in center!Always in center!Always in center!Always in center!Always in center!Always in center!</div> </BODY> </html>

支持FF所需要的ellipsis.xml文件内容如下：

<?xml version="1.0" encoding="UTF-8"?> <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>

IE下，对于loose.dtd的文档类型，span是不受width属性控制的，需要使用div

FF中，span都不受width属性影响