Question

我正在寻找一种方法来在我的响应式网站上创建一个幻灯片'显示更多'功能，该功能会在段落的两行后切断。

我之前使用静态网站，通过对容器应用设置高度并使用overflow: hidden，然后设置容器高度的动画来实现此目的。

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

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

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

感谢您的期待！

Answer 1

从您的小提琴开始，将内容包装为<div>，其默认类为content，用于选择，名为hideContent的类将与{{1}交换点击showContent链接时。

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

HTML：

<p>

CSS：

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

我假设设置.hideContent { overflow: hidden; line-height: 1em; height: 2em; } .showContent { line-height: 1em; height: auto; }将确保它在所有浏览器中都是相同的。虽然我不是百分之百确定。

我将click事件附加到“show more”链接，该链接使用jQueryUI switchClass()切换div上的类：

line-height

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

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

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

Answer 2

如果您正在搜索仅限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

Answer 3

我解决问题的建议

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

如何创建“显示更多”按钮并指定最初显示的文本行数

3 个答案:

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