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 相关文章推荐
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
jquery动态加载select下拉框示例代码
Dec 10 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
package.json文件配置详解
Jun 15 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 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
第十三节 对象串行化 [13]
2006/10/09 PHP
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
php开发环境配置记录
2011/01/14 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
js实现轮播图特效
2020/05/28 Javascript
python3 发送任意文件邮件的实例
2018/01/23 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
python字符串与url编码的转换实例
2018/05/10 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
Python descriptor(描述符)的实现
2020/11/15 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
保荐人的岗位职责
2013/11/19 职场文书
单位成立周年感言
2014/01/26 职场文书
大学军训感言1000字
2014/02/25 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
个人先进材料范文
2014/12/30 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL