文本溢出时显示省略标记

ice-cream

浏览: 329162 次
性别:
来自: 上海

最近访客更多访客>>

fly-sky

zcm1205

ryan.liu

灰袍人

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS XHTML 旅游 Opera HTML

语法：text-overflow : clip | ellipsis

取值：

clip ：默认值 。不显示省略标记(...)，而是简单的裁切.

ellipsis： 当对象内文本溢出时显示省略标记(...).

可惜text-overflow 还只是ie的私有属性而已，也没被收录到w3c标准里 .

如果想让某个容器（div或者li或者...块级元素）显示一行文字，当文字内容过多时，不换行，而是出现...

这样写：例如

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#box{width:100px;background-color:#87CEEB;padding:2px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;/* 不换行 */}
</style>
</head>
<body>
<div id="box">锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</div>
</body>
</html>

注意：overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用

1.一定要给容器定义宽度.

2.如果少了overflow: hidden;文字会横向撑到容易的外面

3.如果少了white-space:nowrap;文字会把容器的高度往下撑；即使你定义了高度，省略号也不会出现，多余的文字会被裁切掉

4.如果少了text-overflow:ellipsis;多余的文字会被裁切掉，就相当于你这样定义text-overflow:clip.

如果容器是table，当文字内容过多时，不换行，而是出现...

这样写：例如

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table{table-layout:fixed;width:106px;}
td{padding:2px 3px;border:1px solid #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;/* 不换行 */}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0"><tr><td>锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</td></tr></table></body>
</html>

注意：

1.一定要给table定义table-layout:fixed;只有定义了表格的布局算法为fixed，下面td的定义才能起作用。

其它的要点和上面一样

text-overflow 的兼容性：

测过ie6，ie7，ff3，safari，opera，chorme，只有ff3和opera不兼容

另一种写法，比较怪。

切张省略号的图片dot.jpg作为li的背景图，背景图在li容器的右上角，并让子元素span相对于父元素div绝对定位，并把span的背景设置成背景色，宽度要大于或者等于省略号图片的宽度。

如果内容没有溢出，span刚好盖在li的背景图片上，这样就看不到省略号。

如果内容溢出，因为span绝对定位到div的右下角，所有span盖不住li的背景图，背景图在第一行的最右边，而span跑到了li的最后一行的最右边，因而我们能够看到省略号。

缺点：对于连续的英文字母和阿拉伯数字不起作用

<!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>
<title>无hack无js全兼容text-overflow:ellipsis效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style>
* { margin:0; padding:0;}
body { background:#fff;}
.list ul { font-size:12px; font-family:simsun; text-align:left; line-height:18px;}
.list a { color:#000; text-decoration:none; word-break:break-all;}
.list div { position:relative; zoom:1; padding-left:1em; ) no-repeat 3px 6px;}
.list span { position:absolute; right:-10px; bottom:0; height:18px; width:10px; background:#fff; overflow:hidden;}
.list li { position:relative; width:11em; background:url(dot.gif) right top no-repeat; height:18px; overflow:hidden; padding-right:10px; zoom:1;}
.list a:hover { color:#f60;}
</style>
<body>
<div class="list">
	<ul>
		<li>
			<div>
				<a href="#">该标签中字符超过十个了</a>
				<span></span>
			</div>
		</li>
		<li>
			<div>
				<a href="#">只有六个汉字</a>
				<span></span>
			</div>
		</li>
		<li>
			<div>
				<a href="#">该标签中字符超过三十个了该标签中字符超过三十个了该标签中字符超过三十个了该标签中字符超过三十个了</a>
				<span></span>
			</div>
		</li>
		<li>
			<div>
				<a href="#">blueidea blueidea blueidea</a>
				<span></span>
			</div>
		</li>
	</ul>
</div>
</body>
</html>

demo.zip (1.9 KB)
下载次数: 46

分享到：

jquery写的弹出层 | 二级菜单事件

2008-11-21 17:55
浏览 3551
评论(4)
查看更多

4 楼阳光暖暖 2009-03-02

ice-cream 写道

阳光暖暖写道您好，看到这篇文章，用了一下，虽然在火狐下面字体也截断了，不过却把一个字劈成了两半，请问有什么解决方法吗？我今天找了很多方法也没有找到。这个用css没啥好的处理办法，可以用js去截，或者后台程序截。

谢谢你的回答啊！以前是后台程序截取的。因为考虑到中英文的显示问题，才想着用css自带的属性解决。嗯，会好好看看其他的实现方法的。谢谢了！

3 楼 ice-cream 2009-02-27

阳光暖暖写道

您好，看到这篇文章，用了一下，虽然在火狐下面字体也截断了，不过却把一个字劈成了两半，请问有什么解决方法吗？我今天找了很多方法也没有找到。

这个用css没啥好的处理办法，可以用js去截，或者后台程序截。

2 楼阳光暖暖 2009-02-27

1 楼 ice-cream 2008-11-22

火星叔叔马丁写道

不兼容ff3 不是w3c标准这两条就难以让人接受啊

毕竟目前大多数浏览器都还是支持的呀，期待有天ff3支持，那它被收录到w3c标准里就不远了

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论