Javascript 如何创建“显示更多”按钮并指定最初可以显示多少行文本

How to create a "show more" button and specify how many lines of text can be initially shown

提问by shrewdbeans

I'm looking for a way to create a slide out 'show more' feature on my responsive site, which cuts off after two linesof a paragraph.

我正在寻找一种在我的响应式网站上创建滑出式“显示更多”功能的方法，该功能在段落的两行后切断。

I've achieved this before with a static website, by applying a set height to the container and using overflow: hidden, and then animating the height of the container.

我之前通过静态网站实现了这一点，方法是将设置的高度应用于容器并使用overflow: hidden，然后为容器的高度设置动画。

But being responsive, the container squashes the text at different browser widths, so the text might take up more/less room. Also there may be different content above the paragraph each time pushing it down. So the setting heightmight not cover two lines exactly.

但是为了响应，容器以不同的浏览器宽度压缩文本，因此文本可能占用更多/更少的空间。此外，每次向下推段落时，其上方可能会有不同的内容。所以设置height可能不会完全覆盖两行。

Please check out this jsFiddle: http://jsfiddle.net/XVAzU/if you need to demonstrate.

如果您需要演示，请查看此 jsFiddle：http: //jsfiddle.net/XVAzU/。

So I need to cut off after two lines of the paragraph, no matter what width the container is or what comes before or after that paragraph.

所以我需要在段落的两行之后切断，无论容器的宽度是多少，或者在该段落之前或之后是什么。

Thanks for looking!

感谢您的关注！

回答by Nope

Starting from your fiddle and wrapped the content into a <div>with a default class of content, used for selection and a class called hideContentwhich will be swapped with showContentwhen clicking the show more/show lesslink.

从你的小提琴开始，将内容包装成一个<div>默认类为content，用于选择和一个名为的类，单击链接时hideContent将与之交换。 showContentshow more/show less

I also removed the <p>the text was in. The text is now within the content-div and we are also now able to apply correct height and line-height settings.

我还删除了<p>文本所在的文本。文本现在位于 content-div 中，我们现在也可以应用正确的高度和行高设置。

HTML:

HTML：

<div class="text-container">
    <h1>Title goes here</h1>
    <h2>Subtitle</h2>
    <div class="content hideContent">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        <p>Some more text</p>
        <ul>
            <li>Some more text</li>
            <li>Some more text</li>
            <li>Some more text</li>
        </ul>
    </div>
    <div class="show-more">
        <a href="#">Show more</a>
    </div>
</div>?

CSS:

CSS：

.hideContent {
    overflow: hidden;
    line-height: 1em;
    height: 2em;
}

.showContent {
    line-height: 1em;
    height: auto;
}

I'm assuming setting the line-heightwill ensure it is the same in all browsers. I'm not 100% certain on that though.

我假设设置line-height将确保它在所有浏览器中都相同。不过我不是 100% 肯定。

I attached a click event to the "show more" link which switches the classes on the div using jQueryUI switchClass():

我将一个单击事件附加到“显示更多”链接，该链接使用 jQueryUI switchClass()切换 div 上的类：

$(".show-more a").on("click", function() {
    var $this = $(this); 
    var $content = $this.parent().prev("div.content");
    var linkText = $this.text().toUpperCase();    

    if(linkText === "SHOW MORE"){
        linkText = "Show less";
        $content.switchClass("hideContent", "showContent", 400);
    } else {
        linkText = "Show more";
        $content.switchClass("showContent", "hideContent", 400);
    };

    $this.text(linkText);
});?

JsFiddle Demo- show more / show less and applying line-height and animation

JsFiddle Demo- 显示更多/显示更少并应用行高和动画

$(".show-more a").on("click", function() {
  var $this = $(this);
  var $content = $this.parent().prev("div.content");
  var linkText = $this.text().toUpperCase();

  if (linkText === "SHOW MORE") {
    linkText = "Show less";
    $content.switchClass("hideContent", "showContent", 400);
  } else {
    linkText = "Show more";
    $content.switchClass("showContent", "hideContent", 400);
  };

  $this.text(linkText);
});

div.text-container {
  margin: 0 auto;
  width: 75%;
}

.hideContent {
  overflow: hidden;
  line-height: 1em;
  height: 2em;
}

.showContent {
  line-height: 1em;
  height: auto;
}

.showContent {
  height: auto;
}

h1 {
  font-size: 24px;
}

p {
  padding: 10px 0;
}

.show-more {
  padding: 10px 0;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="text-container">
  <h1>Title goes here</h1>
  <h2>Subtitle</h2>
  <div class="content hideContent">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>Some more text</p>
    <ul>
      <li>Some more text</li>
      <li>Some more text</li>
      <li>Some more text</li>
    </ul>
  </div>
  <div class="show-more">
    <a href="#">Show more</a>
  </div>
</div>

The above code is an example only but should get you started into the right direction.

上面的代码只是一个例子，但应该让你开始走向正确的方向。

回答by Vangel Tzo

If you're searching for a css only solution check this out:

如果您正在寻找仅使用 css 的解决方案，请查看以下内容：

HTML

HTML

 <div class="show-hide-text">
  <a  id="show-more" class="show-less" href="#show-less">Show less</a>
  <a  id="show-less" class="show-more" href="#show-more">Show more</a>
  <p>
    Lorem Ipsum is simply dummy text of  the printing and typesetting industry...
  </p>
</div>

// CSS

// CSS

.show-hide-text {
  display: flex;
  flex-wrap: wrap;
}

.show-hide-text a {
  order: 2;
}

.show-hide-text p {
  position: relative;
  overflow: hidden;
  max-height: 60px; // The Height of 3 rows
}

.show-hide-text p {
  display: -webkit-box;
  -webkit-line-clamp: 3; // 3 Rows of text
  -webkit-box-orient: vertical;
}

.show-less {
  display: none;
}

.show-less:target {
  display: block;
}

.show-less:target ~ p {
  display: block;
  max-height: 100%;
}

.show-less:target + a {
  display: none;
}

An example: https://codepen.io/srekoble/pen/WGBzZa?editors=1100

一个例子：https: //codepen.io/srekoble/pen/WGBzZa?editors=1100