jQuery實(shí)現(xiàn)文字超過(guò)1行、2行或規(guī)定的行數(shù)時(shí)自動(dòng)加省略號(hào)的方法

更新時(shí)間：2018年03月28日 10:16:46 作者：郭浩326

這篇文章主要介紹了jQuery實(shí)現(xiàn)文字超過(guò)1行、2行或規(guī)定的行數(shù)時(shí)自動(dòng)加省略號(hào)的方法,涉及jQuery針對(duì)頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)文字超過(guò)1行、2行或規(guī)定的行數(shù)時(shí)自動(dòng)加省略號(hào)的方法。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.dhdzp.com jQuery自動(dòng)添加省略號(hào)</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;
      /*根據(jù)父元素的高度來(lái)添加省略號(hào)
      *可以任意設(shè)置顯示的行數(shù)
      */
      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>

運(yùn)行效果：

更多關(guān)于jQuery相關(guān)內(nèi)容可查看本站專題：《jQuery字符串操作技巧總結(jié)》、《jQuery操作xml技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JQuery通過(guò)后臺(tái)獲取數(shù)據(jù)遍歷到前臺(tái)的方法
今天小編就為大家分享一篇JQuery通過(guò)后臺(tái)獲取數(shù)據(jù)遍歷到前臺(tái)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
淺談jquery之on()綁定事件和off()解除綁定事件
下面小編就為大家?guī)?lái)一篇淺談jquery之on()綁定事件和off()解除綁定事件。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
jQuery下拉菜單的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery下拉菜單的實(shí)現(xiàn)代碼的相關(guān)資料,非常不錯(cuò)具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2016-11-11
jquery動(dòng)態(tài)添加option示例
jquery動(dòng)態(tài)添加option選項(xiàng)，還有動(dòng)態(tài)刪除的方法，大家參考使用吧
2013-12-12
解析預(yù)加載顯示圖片藝術(shù)
本文主要介紹了預(yù)加載顯示圖片藝術(shù)實(shí)現(xiàn)的方法--一個(gè)jquery庫(kù)的preLoadImages()函數(shù)，使用這個(gè)函數(shù)就可以輕松實(shí)現(xiàn)圖片預(yù)加載了。需要的朋友可以看下
2016-12-12
jquery 防止表單重復(fù)提交代碼
網(wǎng)站中防止表單重復(fù)提交是一個(gè)比較普遍的需求，先看原理實(shí)現(xiàn)方法也有很多。
2010-01-01
jQuery制作仿騰訊web qq用戶體驗(yàn)桌面
，酷炫個(gè)性的desktop桌面特效展示支持各大主流瀏覽器IE6以上，感興趣的朋友可以體驗(yàn)下哈
2013-08-08
jquery獲取file表單選擇文件的路徑、名字、大小、類型
今天小編就為大家分享一篇關(guān)于jquery獲取file表單選擇文件的路徑、名字、大小、類型，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
2019-01-01
jquery div拖動(dòng)效果示例代碼
div拖動(dòng)效果想必大家都有見(jiàn)到過(guò)吧，實(shí)現(xiàn)的方法也是有很多的，下面為大家將介紹使用jquery是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過(guò)
2013-12-12
JQuery Tips(2) 關(guān)于$()包裝集你不知道的
包裝集總是面向集合的，需要的朋友可以參考下。
2009-12-12