css中对于文字溢出时的控制

css中对于文字溢出时的控制可以通过text-overflow:clip|ellipsis作溢出控制;

其中clip只是作简单的裁切;ellipsis在裁切的同时添加"...",这种方式比js截取字符的方式要好些(针对搜索优化seo)。

但是text-overflow:clip|ellipsis火狐下是不支持的。

那么我们如何来控制火狐下文字溢出呢?

在这里介绍两种方法:

方法一:你可以看到火狐下被截取的文本后面也添加了"...",那么这是如何做到的呢,代码如下:

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

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>yanll_20080505</title>

<style type="text/css">

ul {width: 200px;margin: 40px auto;padding: 12px 4px 12px 24px;border: 1px solid #005fb0;background: #e0f1ff;} 

li {margin: 12px 0;width: 200px; } 

li a {display: block;overflow: hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;} 

/* firefox only */ 

li:not(p) {clear: both;width: 200px;} 

li:not(p) a {float: left;width: 170px;} 

li:not(p):after {content: "..."; float: left;width: 25px;padding-left: 5px;color: #999;}

</style>

</head>

<body>

<ul>

<li><a href="http://www.vegoo.net/">登录个人门户,会有网站引导员指引你进入你的个人门户、你的社区、你的音乐盒</a></li>

<li><a href="http://www.vegoo.net/">登录个人门户,会有网站引导员指引你进入你的</a></li>

<li><a href="http://www.vegoo.net/">登录个人门户,会有网站引导员指引你进入</a></li>

<li><a href="http://www.vegoo.net/">登录个人门户,会有网站引导员指引你进入你的个人门户、你的社区、你的音乐盒</a></li>

<li><a href="http://www.vegoo.net/">登录个人门户,会有网站引导员</a></li>

<li><a href="http://www.vegoo.net/">登录个人门户,会有网站引导员指引你进入</a></li>

</ul>

</body>

</html>

我们来分析一下这段代码,其中css样式中

/* firefox only 针对火狐设置*/
li:not(p) {clear: both;width: 200px;} /*改变li本身的属性,去除li本身的浮动*/
li:not(p) a {float: left;width: 170px;} /*a元素是li里的对象,让a对象左浮动,如果li中文本没有链接,可以替换成span*/
li:not(p):after {content: "..."; float: left;width: 25px;padding-left: 5px;color: #999;}/*在每一个被裁切的li后面添加"..."*/。

方法二:你可以看到,IE下是被截取出现"...",火狐下被截取,类似text-overflow:clip的结果,这种方法适用于li宽度的不定的情况下;

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

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>yanll_20080505</title>

<style type="text/css">

ul {width: 200px;margin: 40px auto;padding: 12px 4px 12px 24px;border: 1px solid #005fb0;background: #e0f1ff;} 

li {margin: 12px 0; } 

li a {display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} 



</style>

</head>

<body>

<ul>

<li><a href="http://www.vegoo.net/">登录个人门户,会有网站引导员指引你进入你的个人门户、你的社区、你的音乐盒</a></li>

<li><a href="http://www.vegoo.net/">登录个人门户,会有网站引导员指引你进入你的</a></li>

<li><a href="http://www.vegoo.net/">登录个人门户,会有网站引导员指引你进入</a></li>

<li><a href="http://www.vegoo.net/">登录个人门户,会有网站引导员指引你进入你的个人门户、你的社区、你的音乐盒</a></li>

<li><a href="http://www.vegoo.net/">登录个人门户,会有网站引导员</a></li>

<li><a href="http://www.vegoo.net/">登录个人门户,会有网站引导员指引你进入</a></li>

</ul>

</body>

</html>


这种方法是不是简单的多呢^_^呵呵,其中与方法一最大的区别就在li{display:block},当改变了li的display属性以后,就可以对它进行轻松的裁切了。

你可能感兴趣的:(css)