javascript 实现文本使用省略号替代(超出固定高度的情况)


Posted in Javascript onFebruary 21, 2017

javascript 实现文本使用省略号替代

实现效果图:

javascript 实现文本使用省略号替代(超出固定高度的情况)

如果图片不清晰,建议放大浏览器的尺寸进行查看

1.这里是配合jQuery来进行替换的,所以jquery还是必备的,毕竟是轻量级,而且对各大的浏览器兼容性也好。所以开始页面引入jquery文件。

2.在页面添加样式。

<style type="text/css">
    .text {
      background: #EEE;/*方便演示设置颜色*/
      /*width: 410px;*/
      height: 40px; /*高度是必须的,用来判断什么时候用...替代*/
      margin: 0;
      line-height: 20px;
      font-size: 14px;
    }
  </style>

3.我这里测试使用的文本内容如下,读者可以自行设置。

<div class="text">
    <p>
      www.nowcoder.com<br />



      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
    </p>
  </div>

  <div class="text">
    <p>
      www.nowcoder.com<br />
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
      <a href='http://www.nowcoder.com'>牛客网</a>良心网 程序员刷题必备网站
    </p>
  </div>

4.在页面的末尾部分加入如下js代码,在页面加载完毕后,进行换行操作。

<script type="text/javascript">
    $(document).ready(function () {
      wrapText();
    });
    function wrapText() {
      $(".text").each(function (i) {
        var divH = $(this).height();
        var $p = $("p", $(this)).eq(0);
        while ($p.outerHeight() > divH) {
          $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
        }
      });
    }
  </script>

需要注意的是上面的js代码使用的文本里面设置的class名称.

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript 指导方针
Apr 05 Javascript
javascript之对系统的toFixed()方法的修正
May 08 Javascript
dwr spring的集成实现代码
Mar 22 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 #Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 #Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 #Javascript
从零学习node.js之文件操作(三)
Feb 21 #Javascript
JavaScript实现按键精灵的原理分析
Feb 21 #Javascript
javascript 组合按键事件监听实现代码
Feb 21 #Javascript
简单谈谈gulp-changed插件
Feb 21 #Javascript
You might like
通过PHP CLI实现简单的数据库实时监控调度
2009/07/01 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
js jquery数组介绍
2012/07/15 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
家长评语大全
2014/01/22 职场文书
护理专科自荐书范文
2014/02/18 职场文书
领导调研接待方案
2014/02/27 职场文书
信仰观后感
2015/06/03 职场文书
投诉信格式范文
2015/07/02 职场文书
2016年母亲节寄语
2015/12/04 职场文书
运动会主持人开幕词
2016/03/04 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书