在多浏览器下,往往采用CSS截断,在IE浏览器中可实现,但是在Firefox,Chrome下,往往不能实现截断处理,导致FF下,显示半个字符样式。为解决此问题,查询好久
终于在坛子中找到一个好的方式。
能实现网页截图的浏览器是。 现特将其引用,整理分享给有此类需求的朋友。
Demo:
1)页面文字如下:
ie浏览器网页版进入?<header>
<title>CSS截断处理演示Demo</title>
<link href="Css/style.css" type="text/css" rel="stylesheet">
</header>
<body>
<div class="PanelDiv">
<ul>
<li><a>美国大选共和党预选启动 摩门教亿万富豪罗姆尼领跑.</a></li>
<li><a> 经验丰富的设计师知道一些其他人不知道的东西,这些东西是什么呢?</a></li>
<li><a>介绍了架构和架构师的理解以及软件开发的过程,相对于原则和模式我们更加强调了开发的过程</a></li>
<li><a>美国大选共和党预选启动 摩门教亿万富豪罗姆尼领跑.</a></li>
<li><a> 经验丰富的设计师知道一些其他人不知道的东西,这些东西是什么呢?</a></li>
<li><a>介绍了架构和架构师的理解以及软件开发的过程,相对于原则和模式我们更加强调了开发的过程</a></li>
<li><a>美国大选共和党预选启动 摩门教亿万富豪罗姆尼领跑.</a></li>
<li><a> 经验丰富的设计师知道一些其他人不知道的东西,这些东西是什么呢?</a></li>
<li><a>介绍了架构和架构师的理解以及软件开发的过程,相对于原则和模式我们更加强调了开发的过程</a></li>
</ul>
</div>
</body>
2) style.css样式如下
下列关于iframe的说法错误的是、.PanelDiv{ width:400px; height:300px;}
.PanelDiv ul li{ width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration: none;}
.PanelDiv ul li a:link, .PanelDiv ul li a:hover, .PanelDiv ul li a:visited{
-o-text-overflow:ellipsis;
-icab-text-overflow:ellipsis;
-khtml-text-overflow:ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
}
3)style.css同级目录下,需要有ellipsis.xml文件,内容如下:
<?xml version="1.0"?>
<bindings
xmlns="http://www.mozilla.org/xbl"
xmlns:xbl="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="ellipsis">
<content>
<xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
</content>
</binding>
</bindings>
能够清除div左右两边浮动的属性是?OK,一切就这样轻松搞定了,至于内在深入原理,还没有搞明白,不太擅长CSS特殊处理功能。
其实,页面内容如果输出很多,采用页面截断方式,会导致网络传输大。还是推荐采用输出内容时,代码截断。在现有CPU处理能力下,对于字符截断的处理,对于性能的损耗微乎其微。当然,如果是数据直接从库中读取,绑定页面模板,这是个值得推荐的方式。后台代码处理截断字符,也可考虑采用客户端脚本处理,毕竟现在很多对于数据读取,都是采用异步读取,返回JSon字符传,可以考虑将Json返回值绑定时,采取一步操作,再从页面显示。