文本溢出时显示省略标记

最新推荐文章于 2023-04-19 15:34:13 发布

iteye_21028

最新推荐文章于 2023-04-19 15:34:13 发布

阅读量119

点赞数

分类专栏： css 文章标签： CSS XHTML 旅游 Opera HTML

css 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

语法：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>

iteye_21028

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本溢出时显示省略标记

语法：text-overflow : clip | ellipsis 取值：clip：默认值。不显示省略标记(...)，而是简单的裁切.ellipsis：当对象内文本溢出时显示省略标记(...). 可惜text-overflow还只是ie的私有属性而已，也没被收录到w3c标准里. 如果想让某个容器（div或者li或者...块级元素）显示一行文字，当文字内容...
复制链接

扫一扫