您的位置：首页 > 其它

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

2014-03-05 11:46 453 查看

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

】作为
li 的背景图，背景图在li 容器的右上角，并让子元素span相对于父元素div绝对定位，并把span的背景设置成背景色，宽度要大于或者等于省略号图片的宽度。
①如果内容没有溢出，那么层div的大小就固定在那宽度不变了，绝对定位的span(一片白色区域)刚好盖在li的背景图片(即省略号图片)上，这样就看不到省略号。
②如果内容溢出，那么层div就会被撑大，换行，因为span绝对定位到div的右下角，所以span盖不住li的背景图，背景图在第一行的最右边，而span跑到了li的最后一行的最右边，因而我们能够看到省略号。
缺点：对于连续的英文字母和阿拉伯数字不起作用

Html Code：

<!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>

运行效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航