jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法


Posted in jQuery onMarch 28, 2018

本文实例讲述了jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com jQuery自动添加省略号</title>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $(".figcaption").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>
  <style>
    *{
      padding: 0px;
      margin: 0px;
    }
    .figcaption{
      width: 300px;
      height: 50px;
      /*根据父元素的高度来添加省略号
      *可以任意设置显示的行数
      */
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="figcaption">
    <p>
      You probably can't do it (currently?) without a fixed-width font like Courier. With
      a fixed-width font every letter occupies the same horizontal space, so you could
      probably count the letters and multiply the result with the current font size in
      ems or exs. Then you would just have to test how many letters fit on one line, and
      then break it up.</p>
  </div>
</body>
<script>
</script>
</html>

运行效果:

jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法

更多关于jQuery相关内容可查看本站专题:《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
纯jQuery实现前端分页功能
Mar 23 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery操作css样式
May 15 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 #jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 #jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 #jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 #jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 #jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 #jQuery
jquery的 filter()方法使用教程
Mar 22 #jQuery
You might like
PHP新手上路(八)
2006/10/09 PHP
wordpress之wp-settings.php
2007/08/17 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
nginx下安装php7+php5
2016/07/31 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
网上卖盒饭创业计划书范文
2014/02/07 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
读书活动总结范文
2014/04/26 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
追讨欠款律师函
2015/06/24 职场文书
浅谈Python魔法方法
2021/06/28 Java/Android
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers