如何用（...）使用javascript替换额外的文本

6 回答

• 1

  $('textarea').on('keyup', function() {
      var v = this.value.length > 50 ? this.value.substr(0,45) + '(...)' : this.value;
      $('#result').text( v );
  });
  

  FIDDLE

  以下是你在最后一句话中删除它的方法：

  FIDDLE

  回复于 2024-04-20T05:41:46+08:00
• 1

  对于集合中的每个元素，如果长度超过50个字符，则以下将在文本的45个字符后追加（ ... ） .

  elem = $('p');
  
  elem.each(function(){
     curTxt = $(this).text();
      $(this).text(curTxt.length > 50 ? curTxt.substring(0,45)+'...' : curTxt);
  });
  

  JSFiddle

  回复于 2024-04-20T05:41:46+08:00
• 0

  是的，它是可行的 . 您可以使用下一个函数来缩短字符串：

  var str = 'Lorem ipsum...'; var shortedStr = str.substr(0,50) + '(...)';

  无论如何，你可以通过CSS自动完成 . 你已经在这里找到了这个主题的答案：

  Truncating long strings with CSS: feasible yet?

  回复于 2024-04-20T05:41:46+08:00
• 0

  您可以设置这样的全局解决方案：

  <p class="truncate">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  

  你可以用 truncate class截断每个段落：

  $('.truncate').each(function (el, index) {
      $el = $(el);
      $el.text($el.text().substr(0, 50) +' (...)');
  });
  

  回复于 2024-04-20T05:41:46+08:00
• 1

  这也可以在CSS中完成，以获得更好的结果 .

  .ellipsis {
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
  }
  

  这样，无论文本的内容如何，文本都将尽可能地尽可能地切断到元素的末尾 . 这看似比看似随机的截止更好 .

  回复于 2024-04-20T05:41:46+08:00
• 2

  检查这个jsfiddle.net domo here

  jQuery

  $(document).ready(function() {
      var showChar = 100;
      var ellipsestext = "...";
      var moretext = "more";
      var lesstext = "less";
      $('.more').each(function() {
          var content = $(this).html();
  
          if(content.length > showChar) {
  
              var c = content.substr(0, showChar);
              var h = content.substr(showChar-1, content.length - showChar);
  
              var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
  
              $(this).html(html);
          }
  
      });
  
      $(".morelink").click(function(){
          if($(this).hasClass("less")) {
              $(this).removeClass("less");
              $(this).html(moretext);
          } else {
              $(this).addClass("less");
              $(this).html(lesstext);
          }
          $(this).parent().prev().toggle();
          $(this).prev().toggle();
          return false;
      });
  });
  

  HTML

  <div class="comment more">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Vestibulum laoreet, nunc eget laoreet sagittis,
      quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
      Duis eget nisl orci. Aliquam mattis purus non mauris
      blandit id luctus felis convallis.
      Integer varius egestas vestibulum.
      Nullam a dolor arcu, ac tempor elit. Donec.
  </div>
  <div class="comment more">
      Duis nisl nibh, egestas at fermentum at, viverra et purus.
      Maecenas lobortis odio id sapien facilisis elementum.
      Curabitur et magna justo, et gravida augue.
      Sed tristique pellentesque arcu quis tempor.
  </div>
  <div class="comment more">
      consectetur adipiscing elit. Proin blandit nunc sed sem dictum id feugiat quam blandit.
      Donec nec sem sed arcu interdum commodo ac ac diam. Donec consequat semper rutrum.
      Vestibulum et mauris elit. Vestibulum mauris lacus, ultricies.
  </div>
  

  回复于 2024-04-20T05:41:46+08:00