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

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遇到这个问题的其他选项(就像我一样),我发现这个动态文本缩短了:

使用jQuery以"显示更多"链接动态缩短文本

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

Answer 4

Show More, Show Less (Only when needed) No JQuery

I needed this functionality for an RSS feed on our company's website. This is what I came up with:

// 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 5

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

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 6

对于那些只想要简单的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>

这是一个CodePen示例。

记住要包括jquery和bootstrap.min.js在标头中。

如果您不使用字体惊人的图标，请更改<i class="fa fa-caret-down"></i>为您选择的任何图标。