jQuery實現文字超過1行、2行或規(guī)定的行數時自動加省略號的方法
更新時間：2018年03月28日 10:16:46 作者：郭浩326
這篇文章主要介紹了jQuery實現文字超過1行、2行或規(guī)定的行數時自動加省略號的方法,涉及jQuery針對頁面元素屬性動態(tài)操作相關實現技巧,需要的朋友可以參考下
本文實例講述了jQuery實現文字超過1行、2行或規(guī)定的行數時自動加省略號的方法。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>chabaoo.cn 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程序設計有所幫助。
相關文章
下面小編就為大家?guī)硪黄猨query實現input框獲取焦點的簡單實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
項目里面一直用的都是jquery1.9，不支持browser對象，百度一下，找到了解決方案在此與大家分享下，有遇到此問題的朋友不要錯過2013-11-11
這篇文章主要介紹了jQuery實現的超簡單點贊效果,結合實例形式分析了jQuery實現點贊功能的具體步驟與相關技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了jQuery刪除一個元素后淡出效果展示刪除過程的方法,實例分析了jQuery中fadeTo及slideUp等方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
在本篇內容里小編給大家分享了jQuery獲取特殊屬性的值以及設置內容相關知識點，有需要的朋友們參考下。2018-11-11
要快速結束一個當前正在執(zhí)行的jquery 動畫時可以在執(zhí)行當前動畫的對象上執(zhí)行 stop(true)方法，下面有個不錯的示例感興趣的朋友不要錯過2013-11-11
這篇文章主要介紹了jQuery實現徑向動畫菜單效果的相關資料,需要的朋友可以參考下2015-07-07
使用jquery選擇器得到對應表單的jquery對象，然后使用attr方法修改對應的action,需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細介紹了jquery實現圖片自動輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
div層的放大與縮小想必大家已不是那么陌生了吧，接下來為大家詳細介紹下使用jQuery實現，感興趣的各位可以參考下哈，希望可以幫助到你2013-03-03