这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 js 代码如何实现文字截断功能, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
先前用 jq 做了一个文字截断功能,但是不用 jq 的项目要实现此功能还要引如 jq 显得过于麻烦。这里写了一个 js 的文字截断功能。直接上代码。
html(测试用的):
- <div>
- 我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox
- </div>
- <div limit="10">
- 我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox
- </div>
- <div limit="5">
- 我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox
- </div>
- <div limit="2">
- 我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox
- </div>
- <div>
- 我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox
- </div>
- <div limit="20">
- 我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox
- </div>
- <div limit="100">
- 我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox
- </div>
- <div>
- 我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox
- </div>
JS:
- var limit = [];
- var Text = [];
- var Pox = document.getElementsByTagName('*');
- for (var i = 0; i < Pox.length; i++) {
- if (Pox[i].getAttribute("limit")) {
- limit[i] = Pox[i].getAttribute("limit");
- Text[i] = Pox[i].innerHTML;
- if (limit[i] < Text[i].length) {
- Pox[i].innerHTML = Text[i].substring(0, limit[i]) + "...";
- }
- }
- }
这里用 getElementsByTagName 获取所有节点遍历,if(Pox[i].getAttribute("limit"))筛选含有 limit 这个自定义属性的节点,然后获取各个节点自定义属性 limit 的值,将其放入 limit 数组中,把各个节点文字放入 Text 数组中,将需要截断的值和文本长度作比较,进行截断。
全部 JS,这里写的自调:
- <script type="text/javascript">
- window.onload = function() { (function limit() {
- var limit = [];
- var Text = [];
- var Pox = document.getElementsByTagName('*');
- for (var i = 0; i < Pox.length; i++) {
- if (Pox[i].getAttribute("limit")) {
- limit[i] = Pox[i].getAttribute("limit");
- Text[i] = Pox[i].innerHTML;
- if (limit[i] < Text[i].length) {
- Pox[i].innerHTML = Text[i].substring(0, limit[i]) + "...";
- }
- }
- }
- } ());
- }
- </script>
效果图:
来源: http://www.phperz.com/article/17/0713/331874.html