首頁 > web前端 > js教程 > 文字超過規定行數時自動產生省略號

文字超過規定行數時自動產生省略號

php中世界最好的语言
發布: 2018-04-28 10:29:24
原創
1404 人瀏覽過

這次帶給大家文字超過規定行數時自動產生省略號,文字超過規定行數時自動產生省略號的注意事項有哪些,下面就是實戰案例,一起來看一下。

<!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 pH = $(this).height();
        var $p = $("p", $(this)).eq(0);
        while ($p.outerHeight() > pH) {
          $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>
  <p 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>
  </p>
</body>
<script>
</script>
</html>
登入後複製

運行效果:

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

JS裡如何驗證E-mail正確位址

js怎麼傳遞陣列參數

以上是文字超過規定行數時自動產生省略號的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
如何使用cmd建立自動生成目錄結構
來自於 1970-01-01 08:00:00
0
0
0
微信服務號二維碼海報自動產生可以嗎?
來自於 1970-01-01 08:00:00
0
0
0
自動產生類別庫
來自於 1970-01-01 08:00:00
0
0
0
java - eclipse 自動產生的hibernateDAO出現錯誤
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板