调整页面标题过长

最新推荐文章于 2025-11-24 02:17:16 发布

原创最新推荐文章于 2025-11-24 02:17:16 发布 · 243 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

本文介绍了一个使用JavaScript实现的自动缩略网页中标题与内容的脚本。该脚本能够根据设定的高度限制来动态调整显示的文本长度，并通过省略号(...)的方式减少文本长度直至符合高度要求。

              <!-- 标题自动缩略 -->
              <script type="text/javascript">
              $(function(){
                  $('.resize').each(function(){
                      var name_length = $(this).text().length - $(this).children().text().length -3;
                      var target = $(this).html().substr(0,name_length);
                      var rest = $(this).html().substr(name_length);
                      // console.log('target=> ' + target);
                      // console.log('rest=> ' + rest);

                      while($(this).height() > 21){
                        target = target.substr(0, target.length-4) + '...';
                        $(this).html(target + rest);
                      }
                      // console.log('target=> ' + target);
                  })
              })
              </script>

  $('div.clearfix.top').each(function(){
      var target = $(this).find('a.title').html();
      // console.log('target=> ' + target);

      while($(this).height() > 28){
        target = target.substr(0, target.length-4) + '...';
        $(this).find('a.title').html(target);
      }
      // console.log('target=> ' + target);
  })

调整页面 标题过长

调整页面标题过长