多浏览器下，CSS截断功能。

在多浏览器下，往往采用CSS截断，在IE浏览器中可实现，但是在Firefox，Chrome下，往往不能实现截断处理，导致FF下，显示半个字符样式。为解决此问题，查询好久

终于在坛子中找到一个好的方式。

　　现特将其引用，整理分享给有此类需求的朋友。

　　Demo：

1）页面文字如下:

<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样式如下

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

OK,一切就这样轻松搞定了，至于内在深入原理，还没有搞明白，不太擅长CSS特殊处理功能。

其实，页面内容如果输出很多，采用页面截断方式，会导致网络传输大。还是推荐采用输出内容时，代码截断。在现有CPU处理能力下，对于字符截断的处理，对于性能的损耗微乎其微。当然，如果是数据直接从库中读取，绑定页面模板，这是个值得推荐的方式。后台代码处理截断字符，也可考虑采用客户端脚本处理，毕竟现在很多对于数据读取，都是采用异步读取，返回JSon字符传，可以考虑将Json返回值绑定时，采取一步操作，再从页面显示。

转载于:https://www.cnblogs.com/tank-lizi/archive/2012/01/03/2310886.html

多浏览器下，CSS截断功能。相关推荐

在不同的浏览器下FORM及它的小伙伴们默认样式的CSS属性值是不完全一致
我们一般在定义CSS样式的时候都需要定义去掉HTML标签默认样式的CSS,原因是在不同的浏览器下面它们的表现出来的默认样式不完全一致,我们要保证在不同的浏览器下它们能正常显示出我们想要达到的预期效果, ...
css grid随页面大小_你现在可以玩下这 5 个 CSS 新功能
在浏览器开始实现它们之前,CSS 新的功能通常需要经过长时间讨论之后,才在W3联盟的规范中定义.有许多值得一提的 CSS 新功能,但是在本文中,我们重点介绍可以浏览器的稳定版中进行测试的五个功能: C ...
win10禁用浏览器css,Win10系统解决使用Edge浏览器下的隐藏设置
Win10系统解决使用Edge浏览器下的隐藏设置, Win10系统edge浏览器下有一些隐藏设置.在普通设置页面中找不到这些隐藏设置.您需要使用一些特殊方法来使用这些隐藏设置.这里说明如何使用Win1 ...
CSS gradient渐变之webkit核心浏览器下的使用
一.关于渐变渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...
百度地图测距功能 DistanceTool 在不同浏览器下标注不一致的解决办法，打开新地图测距不生效的解决办法
1. 在项目中用到百度地图的测距功能,在主页面的地图中用没问题,如果从主页的地图跳转到详情页的地图,在返回到主页,打开地图的测距功能,测距一直不显示.下面是解决办法将测距功能的工具类函数下载到本地, ...
浏览器下的CSS透明度
浏览器下的CSS透明度元素透明度时常是个恼人的问题,下面这种方式可以实现所有浏览器下的透明度设置: .transparent {zoom: 1;filter: alpha(opacity=50);o ...
[css] 说说visibility属性的collapse属性值有什么作用？在不同浏览器下有什么区别？
[css] 说说visibility属性的collapse属性值有什么作用?在不同浏览器下有什么区别? 设置visibility: collapse后对于普通元素来说跟visibility: hidd ...
html5网页自动下滑,HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码...
H5手指下滑弹出负一屏, 阻止移动端浏览器内置下拉刷新功能,具体实例代码如下所示: 默认隐藏,负一屏,手指下滑即可弹出显示,上滑隐藏正式内容 import $ from 'jquery'; expo ...
完美解决IE浏览器下下载功能
完美解决IE浏览器下下载功能当时是自己封装的用a标签下载,但是遇到IE就是一堆的坑,不能下载 var image = new Image()// 解决跨域 Canvas 污染问题image.setA ...

多浏览器下，CSS截断功能。

多浏览器下，CSS截断功能。相关推荐

最新文章

热门文章