CSS文本溢出省略号

最新推荐文章于 2024-09-19 08:00:00 发布

初来乍到

最新推荐文章于 2024-09-19 08:00:00 发布

阅读量3.4k

点赞数 1

分类专栏： CSS 文章标签： css firefox opera 浏览器 url ie

本文链接：https://blog.csdn.net/liangoo7/article/details/7005149

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

语法：
　　text-overflow : clip | ellipsis

　　参数：
　　clip : 　不显示省略标记（...），而是简单的裁切
　　 （clip这个参数是不常用的！）
　　ellipsis : 　当对象内文本溢出时显示省略标记（...）

　　说明：
　　设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。

　　请您注意，text-overflow:ellipsis属性在FF中是没有效果的。

text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。

.ellipsis {
    width:300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

为了适应多种浏览器，可以写这下面这样：

.ellipsis {
	width: 180px; 
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis; /*For Opera*/
	-ms-text-overflow: ellipsis; /*For IE8*/
	-moz-binding: url(assets/xml/ellipsis.xml#ellipsis); /*For Firefox3.x*/
}

为了在firefox中可用，需要创建XUL，它应该被保存为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:window>
				<xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
			</xul:window>
		</content>
	</binding>
</bindings>

把它保存在assets/xml/ellipsis.xml#ellipsis目录中。