从您的小提琴开始，将内容 Package 到<div>中，默认类为content，用于选择，类hideContent将在单击show more/show less链接时与showContent交换。
我还删除了文本所在的<p>。文本现在位于content-div中，我们现在也能够应用正确的高度和行高设置。
超文本：

<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将确保它在所有浏览器中是相同的，但我不能100%肯定。
我使用jQueryUI switchClass()将一个click事件附加到“show more”链接，该链接切换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-显示更多/显示更少并应用行高和动画

一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个
上面的代码只是一个例子，但是应该可以让你从正确的方向开始。

如果你正在寻找一个只使用css的解决方案，看看这个：
超文本标记语言

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

//参数设置

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