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

Trim text using Jquery with clickable "More" but keep text format

本文关键字：文本 修剪 Jquery 格式 保留 更多      更新时间：2023-09-26

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

我该如何解决这个问题？

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>

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

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

   $(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);
});

@Gerrit_Luimstra， 谢谢你的帮助，你回答了我的第一个问题

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

相关文章：