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

时间：2021-05-26

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>/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程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章