显示更多，显示更少（仅在需要时）没有JQuery

Question

我希望文本只有一定数量的字符/长度，在这个长度之后，我想要一个链接来显示文本的全长。

链接将为(more...)。一旦用户点击链接(more..)，文本的其余部分就会向下滑动。

我将如何做到这一点？

以下是一个例子。

blah blah blah blah blah (more...)

当用户点击(more..)时，它会显示整个文字。

注意：我在表行/表格单元格中获取有关数据，而不仅仅是任何文本。

Answer 1

关于此效果的秘诀在于使用HTML标记包装您要控制的部分。

$(".more").toggle(function(){
    $(this).text("less..").siblings(".complete").show();    
}, function(){
    $(this).text("more..").siblings(".complete").hide();    
});

<span class="teaser">text goes here</span>

<span class="complete"> this is the 
complete text being shown</span>

<span class="more">more...</span>

在线演示： http://jsfiddle.net/zA23k/215/

Answer 2

$('#more').click(function(e) {
    e.stopPropagation();
    $('div').css({
        'height': 'auto'
    })
});

$(document).click(function() {
    $('div').css({
        'height': '40px'
    })
})

检查http://jsfiddle.net/7Vv8u/4/

处的工作示例

使用动画http://jsfiddle.net/7Vv8u/5/

单击“阅读更多”以展开文本。点击外面再次将其最小化。

Answer 3

我知道这个问题有点陈旧（并且已经选择了它的答案）但是对于那些希望通过Google遇到这个问题的其他选项（就像我一样），我发现这个动态文本缩短了：

Dynamically shortened Text with “Show More” link using jQuery

我发现它更好，因为您可以设置字符限制，而不是代码中的额外跨度，或者设置容器的特定高度。
希望它可以帮助其他人！

Answer 4

如果您需要一些完整的解决方案，可以使用：

http://jsfiddle.net/7Vv8u/2703/

JS（jQuery）

var text = $('.text-overflow'),
     btn = $('.btn-overflow'),
       h = text.scrollHeight; 

if(h > 120) {
    btn.addClass('less');
    btn.css('display', 'block');
}

btn.click(function(e) 
{
  e.stopPropagation();

  if (btn.hasClass('less')) {
      btn.removeClass('less');
      btn.addClass('more');
      btn.text('Show less');

      text.animate({'height': h});
  } else {
      btn.addClass('less');
      btn.removeClass('more');
      btn.text('Show more');
      text.animate({'height': '120px'});
  }  
});

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<div class="text-overflow">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>
<a class="btn-overflow" href="#">Show more</a>

CSS

.text-overflow {
  width:250px;
  height:120px;
  display:block; 
  overflow:hidden;
  word-break: break-word;
  word-wrap: break-word;
}

.btn-overflow {
  display: none;
  text-decoration: none; 
}

Answer 5

这是使用可点击文章的另一种解决方案（当然可以更改为任何内容）。

http://jsfiddle.net/SqJ53/2/

编辑：如果要使用CSS动画，则必须使用MAX-HEIGHT而不是HEIGHT

<强>的Javascript

$(".container article").click(function() {
        $(this).toggleClass("expand");
})

<强> CSS

.container {
    position: relative;
    width: 900px;
    height: auto;
}
.container article {
    position: relative;
    border: 1px solid #999;
    height: auto;
    max-height: 105px;
    overflow: hidden;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out; 
}
.container article:hover {
    background: #dadada;
}
.container article.expand {
    max-height: 900px;
}

<强> HTML

<div class="container">
    <article class="posts-by-cat_article-222">
        <h3><a href="http://google.se">Section 1</a></h3>
        <p>This is my super long content, just check me out.</p>
        <p>This is my super long content, just check me out.</p>
        <p>This is my super long content, just check me out.</p>
        <p>This is my super long content, just check me out.</p>
    </article>

    <article class="posts-by-cat_article-222">
        <h3><a href="http://google.se">Section 2</a></h3>
        <p>This is my super long content, just check me out.</p>
        <p>This is my super long content, just check me out.</p>
        <p>This is my super long content, just check me out.</p>
        <p>This is my super long content, just check me out.</p>

    </article>
</div>

Answer 6

这是一个非常简单的解决方案，对我有用，

<span id="text">Extra Text</span>
<span id="more">show more...</span>
<span id="less">show less...</span>

<script>
 $("#text").hide();
 $("#less").hide();
 $("#more").click( function() {
   $("#text").show();
   $("#less").show();
   $("#more").hide();
 });
 $("#less").click( function() {
   $("#text").hide();
   $("#less").hide();
   $("#more").show();
 });
</script>

Answer 7

显示更多，显示更少（仅在需要时）没有JQuery

我在公司网站上的RSS源需要此功能。这就是我想出的：

// Create Variables
var allOSB = [];
var mxh = '';

window.onload = function() {
  // Set Variables
  allOSB = document.getElementsByClassName("only-so-big");
  
  if (allOSB.length > 0) {
    mxh = window.getComputedStyle(allOSB[0]).getPropertyValue('max-height');
    mxh = parseInt(mxh.replace('px', ''));
    
    // Add read-more button to each OSB section
    for (var i = 0; i < allOSB.length; i++) {
      var el = document.createElement("button");
      el.innerHTML = "Read More";
      el.setAttribute("type", "button");
      el.setAttribute("class", "read-more hid");
      
      insertAfter(allOSB[i], el);
    }
  }

  // Add click function to buttons
  var readMoreButtons = document.getElementsByClassName("read-more");
  for (var i = 0; i < readMoreButtons.length; i++) {
    readMoreButtons[i].addEventListener("click", function() { 
      revealThis(this);
    }, false);
  }
  
  // Update buttons so only the needed ones show
  updateReadMore();
}
// Update on resize
window.onresize = function() {
  updateReadMore();
}

// show only the necessary read-more buttons
function updateReadMore() {
  if (allOSB.length > 0) {
    for (var i = 0; i < allOSB.length; i++) {
      if (allOSB[i].scrollHeight > mxh) {
        if (allOSB[i].hasAttribute("style")) {
          updateHeight(allOSB[i]);
        }
        allOSB[i].nextElementSibling.className = "read-more";
      } else {
        allOSB[i].nextElementSibling.className = "read-more hid";
      }
    }
  }
}

function revealThis(current) {
  var el = current.previousElementSibling;
  if (el.hasAttribute("style")) {
    current.innerHTML = "Read More";
    el.removeAttribute("style");
  } else {
    updateHeight(el);
    current.innerHTML = "Show Less";
  }
}

function updateHeight(el) {
  el.style.maxHeight = el.scrollHeight + "px";
}

// thanks to karim79 for this function
// http://stackoverflow.com/a/4793630/5667951
function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans:600');

*,
*:before,
*:after {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
body {
  font-family: 'Open Sans', sans-serif;
}
h1 {
  text-align: center;
}
.main-container {
  margin: 30px auto;
  max-width: 1000px;
  padding: 20px;
}
.only-so-big p {
  padding: 0;
  margin: 0;
}
p {
  font-size: 15px;
  line-height: 20px;
}
hr {
  background: #ccc;
  display: block;
  height: 1px;
  width: 100%;
}


/*
  NECESSARY SECTION
*/
.only-so-big {
  background: rgba(178, 252, 255, .3);
  height: 100%;
  max-height: 100px;
  overflow: hidden;
  -webkit-transition: max-height .75s;
  transition: max-height .75s;
}

.read-more {
  background: none;
  border: none;
  color: #1199f9;
  cursor: pointer;
  font-size: 1em;
  outline: none; 
}
.read-more:hover {
  text-decoration: underline;
}
.read-more:focus {
  outline: none;
}
.read-more::-moz-focus-inner {
  border: 0;
}
.hid {
  display: none;
}

<div class="main-container">
      <h1>Controlling Different Content Size</h1>
      <p>We're working with an RSS feed and have had issues with some being much larger than others (content wise). I only want to show the "Read More" button if it's needed.</p>
      <div class="only-so-big">
        <p>This is just a short guy. No need for the read more button.</p>
      </div>
      <hr>
      <div class="only-so-big">
        <p>This one has way too much content to show. Best be saving it for those who want to read everything in here.</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
          voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi THE END!</p>
      </div>
      <hr>
      <div class="only-so-big">
        <p>Another small section with not a lot of content</p>
      </div>
      <hr>
      <div class="only-so-big">
        <p>Make Window smaller to show "Read More" button.<br> totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed?</p>
      </div>
    </div>

Answer 8

对于那些只想要一个简单的Bootstrap解决方案的人。

<style>
 .collapse.in { display: inline !important; }
</style>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the

<span class="collapse" id="more"> 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.</span>
<span><a href="#more" data-toggle="collapse">... <i class="fa fa-caret-down"></i></span>

请记住在标题中加入 jquery 和 bootstrap.min.js 。

如果您没有使用fontawesome图标，请将<i class="fa fa-caret-down"></i>更改为您选择的任何图标。

Answer 9

另一种可能的解决方案，我们可以使用2个HTML元素来存储简短而完整的文字。因此，我们可以显示/隐藏适当的HTML 元素： - ）

<p class="content_description" id="brief_description" style="display: block;"> blah blah blah blah blah  </p><p class="content_description" id="complete_description" style="display: none;"> blah blah blah blah blah with complete text </p>

/* jQuery code to toggle both paragraph. */

(function(){
        $('#toggle_content').on(
                'click', function(){
                                $("#complete_description").toggle();
                                $("#brief_description").toggle();
                                if ($("#complete_description").css("display") == "none") {
                                    $(this).text('More...');
                                }   else{
                                    $(this).text('Less...');
                                }
                        }
                );
    })();

Answer 10

这么多的答案和所有这些答案都很好，但我会建议我自己，也许这对某些人有用。

我们在模板中有HTML：

<div class="listing-item-excerpt" id="listing-item-excerpt-<?= $task['id'] ?>">
    <?= mb_substr($txt, 0, 150) ?><span class="complete_txt"><?= mb_substr($txt, 150) ?></span>
    <a href="javascript: show_more_less(<?= $task['id'] ?>);void(0);" class="more_less_btn" data-more-txt="<?= __('... show more') ?>" data-less-txt="&nbsp;<?= __('show less') ?>" data-state="0"><?= __('... show more') ?></a>
</div>

用于切换的JS函数：

function show_more_less(task_id) {

    var btn = jQuery('#listing-item-excerpt-' + task_id).find('.more_less_btn');
    var txt_container = jQuery('#listing-item-excerpt-' + task_id).find('.complete_txt');
    var state = parseInt(jQuery(btn).data('state'), 10);
    if (state === 0) {
        jQuery(txt_container).show();
        jQuery(btn).text(jQuery(btn).data('less-txt'));
        jQuery(btn).data('state', 1);
    } else {
        jQuery(txt_container).hide();
        jQuery(btn).text(jQuery(btn).data('more-txt'));
        jQuery(btn).data('state', 0);
    }
}

Answer 11

你可以这样使用

$(".jsgrid-cell").each(function(i,v){
    var txt=$(v).text();
    if(txt.length>100){
        var shortText=txt.substring(0, 100)+
        "<span onclick='$(this).hide();$(this).next().toggle();'>"+
            "..."+
        "</span>"+
        "<span  style='display:none'>"+
            txt.substring(100, txt.length)+
        "</span>";

        $(v).html(shortText );
    }
});

Answer 12

将文字置于 Your Text Here 中，然后将文件复制到js文件中。您已准备就绪。 see more..和see less..选项的工作代码。 适用于动态文本和静态文本

<div class="item">
  Your Text Here
</div>

<script type="text/javascript">
 $(function(){ /* to make sure the script runs after page load */

    $('.item').each(function(event){ /* select all divs with the item class */

      var max_length = 150; /* set the max content length before a read more link will be added */

      if($(this).html().length > max_length){ /* check for content length */

        var short_content   = $(this).html().substr(0,max_length); /* split the content in two parts */
        var long_content  = $(this).html().substr(max_length);

        $(this).html(short_content+'<a href="#" class="read_more">Show More</a>'+
               '<span class="more_text" style="display:none;">'+long_content+'</span>'+'<a href="#" class="read_less" style="display:none;">Show Less</a>'); /* Alter the html to allow the read more functionality */

        $(this).find('a.read_more').click(function(event){ /* find the a.read_more element within the new html and bind the following code to it */

          event.preventDefault(); /* prevent the a from changing the url */
          $(this).hide(); /* hide the read more button */
          $('.read_less').show(); /* show read less button */

          $(this).parents('.item').find('.more_text').show(); /* show the .more_text span */

        });

        $(this).find('a.read_less').click(function(event){ 
          event.preventDefault();

          $(this).hide(); /* hide the read more button */
          $('.read_less').hide();
          $('.read_more').show();

          $(this).parents('.item').find('.more_text').hide();

        });

      }

    });


  });
</script>

Answer 13

HTML

<div>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>asdasdasdasd
    <br>
</div>

<a id="more" href="#">Read more </a>
<a id="less" href="#">Read less </a>

CSS

<style type="text/css">
    div{
        width:100px;
        height:50px;
        display:block;
        border:1px solid red;
        padding:10px;
        overflow:hidden;
    }
</style>

jQuery

<link rel="stylesheet" 
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css" 
type="text/css" media="all" />

<script type="text/javascript">
var h = $('div')[0].scrollHeight;


$('#more').click(function(e) {
   e.stopPropagation();
   $('div').animate({
      'height': h
   })
   $('#more').hide();
   $('#less').show();
});

$('#less').click(function(e) {

    $('#more').show();
    $('#less').hide();
});

$(document).click(function() {
    $('div').animate({
        'height': '50px'
    })
})
$(document).ready(function(){
     $('#less').hide();
})
</script>

Answer 14

更新了@Hussein解决方案，其预览高度将适应段落的行数。

因此，用这段代码： -您可以选择要在预览中显示的行数，即使字体大小敏感，它也适用于所有屏幕尺寸。 -无需添加类或后端编辑即可将预览与整个内容分开。

http://jsfiddle.net/7Vv8u/5816/

var h = $('div')[0].scrollHeight;

divLineHeight = parseInt($('div').css('line-height'));
divPaddingTop = parseInt($('div').css('padding-top'));
lineToShow = 2;
divPreviewHeight = divLineHeight*lineToShow - divPaddingTop;
$('div').css('height', divPreviewHeight );

$('#more').click(function(e) {
  e.stopPropagation();
  $('div').animate({
    'height': h
  })
});

$(document).click(function() {
  $('div').animate({
    'height': divPreviewHeight
  })
})

Answer 15

另一个好的解决方案可能是在您的 div 容器上放置一个固定高度以仅显示您的文本的一部分，然后插入一个函数，该函数在单击链接（例如“更多...”）时会更改 div自动 CSS 的高度：

`$("#more").click(function(){

$(".container").css({"height": "auto" }); });`

如何隐藏/显示一定长度内的更多文本（如youtube）

15 个答案:

检查http://jsfiddle.net/7Vv8u/4/

使用动画http://jsfiddle.net/7Vv8u/5/

显示更多，显示更少（仅在需要时）没有JQuery