Question

<div>This is my content containing some general large text to display ...
   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,          when an unknown printer took a galley of type and scrambled it to make a type  specimen book. It has survived not only five centuries, but also the leap into  electronic typesetting, remaining essentially unchanged. It was popularised in  the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</div>

如何在点击（...）时阅读更多扩展内容的功能没有任何其他嵌套Div或

标签＆＃34; Just Single Div＆＃34;

提前致谢

Answer 1

做类似的事情：

HTML

<div class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

CSS

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

JAVASCRIPT

$(".truncate").click(function() {
    $(this).removeClass("truncate");
});

Answer 2

＆＃13;

$(function() {
  var length = $("#content").text().length;
  var originalText = $("#content").text();
  var splittedText = "";
  
  if (length > 100) {
    splittedText = $("#content").text().substring(0, 100);
    splittedText += "...";
    $("#content").after("<input id='button_more' type='button' value='read more'/>");
  }
  
  $("#content").text(splittedText);
  
  $("#button_more").click(function() {    
    $("#content").text(originalText);
    $("#content").hide(0);
    $("#content").show(1000);
    $("#button_more").hide(1000);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title>read more test</title>
    <meta charset='utf-8'/>
  </head>
  <body>
    <div id="content" style='text-align : justify'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur varius justo ac ante hendrerit, id convallis     felis fermentum. Fusce vehicula, eros ut blandit lobortis, dui nunc euismod massa, non placerat sapien dolor in libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent nec est in sapien finibus bibendum. Proin turpis odio, pulvinar id convallis ac, condimentum ac enim. Vestibulum eu ante sit amet nisl commodo hendrerit vitae non tortor. Fusce feugiat magna at tempus dictum. Sed pharetra volutpat risus sit amet rhoncus. Morbi maximus lectus purus, venenatis sodales orci luctus eget. Ut viverra commodo tempus. Morbi varius diam id ex dignissim pulvinar. Aliquam ac tincidunt lectus. Nulla pulvinar dolor eros, at porttitor lacus sagittis ut.
    </div>
  </body>
</html>

＆＃13;

此片段通过保存前100个字符，添加＆＃34; ...＆＃34;以及一个允许用户通过单击显示整个文本的按钮来剪切文本。

Answer 3

假设您的文字有多个段落，您可以拆分：

var size = $("#" + read_more_id + " p").size();

并实现类似这样的内容：http://jsfiddle.net/451zncwn/1/。此示例还会自动添加＆＃34;阅读更多＆＃34;并且＆＃34;阅读更少＆＃34;链接。

如何使用单个div实现读取更多功能

3 个答案: