jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018-03-28 10:16
846 查看
本文实例讲述了jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法。分享给大家供大家参考,具体如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 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相关内容可查看本站专题:《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- 文字超过1行、2行或者规定的行数,文字自动加省略号
- jQuery实现控制文字内容溢出用省略号(…)表示的方法
- jQuery实现图片与文字描述左右滑动自动切换的方法
- 使用纯CSS实现文字超过一定的长度后自动显示省略号
- jQuery实现控制文字内容溢出用省略号(…)表示的方法
- jQuery实现图片与文字描述左右滑动自动切换的方法
- jquery文字填写自动高度的实现方法
- jQuery实现搜索关键字自动匹配提示方法
- jQuery实现新浪微博自动底部加载的方法
- CSS用省略号实现文字自动截断
- jQuery实现tab标签自动切换的方法
- ASP.NET jQuery 随笔 使用jQuery UI的Autocomplete方法实现文本框的自动搜索填充功能
- jQuery实现数秒后自动提交form的方法
- jQuery实现数秒后自动提交form的方法
- jQuery实现搜索关键字自动匹配提示方法
- Android 文字自动滚动(跑马灯)效果的两种实现方法
- JQuery实现文字滚动效果-最简单的方法
- css实现文字过长显示省略号的方法
- Android 文字自动滚动(跑马灯)效果的两种实现方法
- jQuery实现 div里面的文字如何自动缩小,避免文字溢出