如何创建一个“;显示更多“;按钮，并指定最初可以显示的文本行数

从你的小提琴开始，将内容包装到一个<div>中，默认类为content，用于选择，还有一个名为hideContent的类，当单击show more/show less链接时，它将与showContent交换。

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

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：

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

我假设设置line-height将确保它在所有浏览器中都是相同的。不过我不能百分之百肯定。

我在"显示更多"链接上附加了一个点击事件，该链接使用jQueryUIswitchClass（）切换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演示-显示更多/显示更少并应用线条高度和动画

$(".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>

上面的代码只是一个示例，但应该会让您朝着正确的方向开始。

如果您正在搜索纯css解决方案，请查看以下内容：

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

.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;
}

例如：https://codepen.io/srekoble/pen/WGBzZa?editors=1100

我解决问题的建议

$("#slider_desc_toogler").on( "click", function() { 
  $('#slider_desc_toogler > i').toggleClass('fa-arrow-circle-down')
  $('#slider_desc_toogler > i').toggleClass('fa-arrow-circle-up')
  if ($("#slider_desc_toogler > i").hasClass( "fa-arrow-circle-down" )) {
    $(".slider_desc").css("max-height","38px");
  } else $(".slider_desc").css("max-height","500px");
});

.slider_desc {
  margin: 16px;
  margin-top: 0px;
  color: #333333;
  font-family: Arial;
  font-size: 14px;
  line-height: 18px;
  text-align: justify;
  overflow: hidden;
  transition: all 0.5s ease 0s;
  max-height: 38px;
}
#slider_desc_toogler{
  border-top: silver 1px dotted;
  margin-bottom: 30px;
  margin-top: 20px;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}
#slider_desc_toogler i {
      position: absolute;
      text-align: center;
      color: silver;
      font-size: 25px;
      font-family: fontawesome;
      left: calc(50% - 10px);
      margin-top: -13px;
      background: #fff;
  }

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="slider_desc">
            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 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 id="slider_desc_toogler"><i class="fas fa-arrow-circle-down"></i></div>

我修改了以前的代码，使其不使用jQueryUI switchClass()，现在是：

$(document).ready(function() {
  $(".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.removeClass("hideContent");
      $content.addClass("showContent");
    } else {
      linkText = "Show more";
      $content.removeClass("showContent");
      $content.addClass("hideContent");
    };
    $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/3.6.1/jquery.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>