如何让文本溢出时显示省略标记“……”

最新推荐文章于 2023-06-10 17:56:43 发布

ft2166826

最新推荐文章于 2023-06-10 17:56:43 发布

阅读量2.3k

点赞数

分类专栏： html/div/css

html/div/css 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

语法：text-overflow : clip | ellipsis

取值：

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

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

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

Ⅰ. 如果想让某个容器（div或者li 等块级元素）显示一行文字，当文字内容过多时，不换行，而是出现“……”，可以这样写：

1.	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2.	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3.	<html xmlns="http://www.w3.org/1999/xhtml">
4.	<head>
5.	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6.	<title></title>
7.	<style type="text/css">
8.	#box{width:100px;background-color:#87CEEB;padding:2px 3px;overflow:hidden;
9.	text-overflow:ellipsis;white-space:nowrap;/* 不换行 */}
10.	</style>
11.	</head>
12.	<body>
13.	<div id="box">华电国际邹城发电厂是目前世界上最大的火力发电厂，其电力资源甚至远供加拿大。</div>
14.	</body>
15.	</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，当文字内容过多时，不换行，而是出现“……”这样写：

Html代码：

<!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的定义才能起作用。

其它的要点和上面一样，即

2.一定要给容器定义宽度。

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

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

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

text-overflow 的兼容性：测过ie6，ie7，ff3，safari，opera，chorme，只有ff3和opera不兼容。

Ⅲ. 另一种写法，比较怪：

切张省略号的图片dot.jpg【如何让文本溢出时显示省略标记“……” - JORTON - ★柳暗花明★ 】作为 li 的背景图，背景图在li 容器的右上角，并让子元素span相对于父元素div绝对定位，并把span的背景设置成背景色，宽度要大于或者等于省略号图片的宽度。

①如果内容没有溢出，那么层div的大小就固定在那宽度不变了，绝对定位的span(一片白色区域)刚好盖在li的背景图片(即省略号图片)上，这样就看不到省略号。

②如果内容溢出，那么层div就会被撑大，换行，因为span绝对定位到div的右下角，所以span盖不住li的背景图，背景图在第一行的最右边，而span跑到了li的最后一行的最右边，因而我们能够看到省略号。

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

Html Code：如何让文本溢出时显示省略标记“……” - JORTON - ★柳暗花明★

<!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:12px; 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>