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返回定位插件详解
May 15 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery实现评论模块
Aug 19 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
跟老齐学Python之开始真正编程
2014/09/12 Python
python高阶爬虫实战分析
2018/07/29 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
如何在Django项目中引入静态文件
2019/07/26 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
django列表筛选功能的实现代码
2020/03/27 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
python logging.info在终端没输出的解决
2020/05/12 Python
百思买美国官网:Best Buy
2016/07/28 全球购物
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
情人节寄语大全
2014/04/11 职场文书
老龄工作先进事迹
2014/08/15 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
军事理论课感想
2015/08/11 职场文书
千万级用户系统SQL调优实战分享
2022/03/03 MySQL
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android