Question

我想使用下面的Jquery截断下面的div ID =“content”中的文本，但是我也希望保留文本格式，因为当我使用jquery时我丢失了<br>文本它用作段落分隔符。

我该如何解决？

var minimized_elements = $('#content'); 

minimized_elements.each(function() {
  var t = $(this).text();
  if (t.length < 300) return;

  $(this).html(
    t.slice(0, 300) + '<span>... </span><a href="#" class="more">More</a>' +
    '<span style="display:none;">' + t.slice(300, t.length) + ' <a href="#" class="less">Less</a></span>'
  );

});

$('a.more', minimized_elements).click(function(event) {
  event.preventDefault();
  $(this).hide().prev().hide();
  $(this).next().show();
});

$('a.less', minimized_elements).click(function(event) {
event.preventDefault();
$(this).parent().hide().prev().show().prev().show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
 It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content content
    here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text
  
  <br>
  <br>
 It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text

</div>

Answer 1

好吧，所发生的事情是你只使用元素里面的文字。但是，您说您还想使用该元素将切片文本添加到以后。

对此的一个简单修复（如果您知道它是什么类型的元素，例如段落元素）是：

   $(this).html(
    '<p>'+ t.slice(0, 300) + '</p>' + '<span>... </span><a href="#" class="more">More</a>' +
    '<span style="display:none;">' + t.slice(300, t.length) + ' <a href="#" class="less">Less</a></span>'
  );

这是你在找什么？

已编辑的代码：

HTML：

<div id="element">
  <p>Lorum ipsum dolor</p>
  <p>Hello this is an example text..</p>
</div>

<p>What this does, is it iterates through each paragraph element. 
   It cuts it at 10 letters, but then a word can be slices in two, 
   which is not good. 
   So the script will continue to remove the last pieces of this cut word until it finds a space.</p>

和jQuery：

$("#element p").each(function(){
  var text = $(this).text();
  var sliced = jQuery.trim(text).substring(0, 10);

  // inverse loop through the string to remove the charachters of the broken word...
  for (var i = sliced.length - 1; i >= 0; i--) {
    if(sliced[i] == " "){
      // if a space occurs, break the loop, but remove this space:
      sliced = sliced.slice(0, -1);
      break;
    } else {
      // if the charachter is not a space, remove the charachter.
      sliced = sliced.slice(0, -1);
    }
  }

  // optional
  sliced += " ... read more";

  // output the text. 
  document.write("Outputs: " + sliced + "<br>");

  // OR you can change the paragraphs text directly like this:
  // $(this).text(sliced);
});

Answer 2

@Gerrit_Luimstra，感谢您的帮助，您已回答我的第一个问题

@MugiwaraUK，感谢您回答我的第二个问题，您的解决方案有效！

使用可点击“更多”的Jquery修剪文本，但保留文本格式

2 个答案: