Question

当读取更多数据并且读取更少的数据工作正常时，我根据高度读取更多读数。但是当数据较少时，阅读较少的文本正在向上移动这是fiddle 如何解决这个问题。

＆＃13;

$(".show-more a").on("click", function() {
  var $link = $(this);
  var $content = $link.parent().prev("div.text-content");
  var linkText = $link.text();
  $content.toggleClass("short-text, full-text");
  $link.text(getShowLinkText(linkText));
  return false;
});

function getShowLinkText(currentText) {
  var newText = '';
  if (currentText.toUpperCase() === "READ MORE...") {
    newText = "Read less...";
  } else {
    newText = "Read more...";
  }
  return newText;
}

＆＃13;

text-content {
  line-height: 1em;
}

.short-text {
  overflow: hidden;
  height: 2em;
}

.full-text {
  height: auto;
}

h1 {
  font-size: 24px;
}

.show-more {
  padding: 10px 0;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
  <h1>Lorem ipsum dolor</h1>
  <div class="text-content short-text">
    voluptua.
  </div>
  <div class="show-more">
    <a href="#">Read more...</a>
  </div>
</div>

＆＃13;

阅读更多阅读较少的文本应该只在底部如何解决这个问题。

Answer 1

添加/更新了这些样式

html, body, .text-container {
    height: 100%;
}
.text-container {
position: relative;
}
.show-more {
  padding: 10px 0;
  text-align: center;
  position: absolute;
  bottom: 0;
}

＆＃13;

$(".show-more a").on("click", function() {
  var $link = $(this);
  var $content = $link.parent().prev("div.text-content");
  var linkText = $link.text();
  $content.toggleClass("short-text, full-text");
  $link.text(getShowLinkText(linkText));
  return false;
});

function getShowLinkText(currentText) {
  var newText = '';
  if (currentText.toUpperCase() === "READ MORE...") {
    newText = "Read less...";
  } else {
    newText = "Read more...";
  }
  return newText;
}

＆＃13;

html, body, .text-container {
    height: 100%;
}
.text-container {
position: relative;
}
.text-content {
  line-height: 1em;
}

.short-text {
  overflow: hidden;
  height: 2em;
}

.full-text {
  height: auto;
}

h1 {
  font-size: 24px;
}

.show-more {
  padding: 10px 0;
  text-align: center;
  position: absolute;
  bottom: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
  <h1>Lorem ipsum dolor</h1>
  <div class="text-content short-text">
    voluptua.
  </div>
  <div class="show-more">
    <a href="#">Read more...</a>
  </div>
</div>

＆＃13;

Answer 2

尝试这样的事情

var status = "less";

function toggleText()
{
    var text="Here is some text that I want added to the HTML file";

    if (status == "less") {
        document.getElementById("textArea").innerHTML=text;
        document.getElementById("toggleButton").innerText = "See Less";
        status = "more";
    } else if (status == "more") {
        document.getElementById("textArea").innerHTML = "";
        document.getElementById("toggleButton").innerText = "See More";
        status = "less"
    }
}

在数据较少时读取较少的文本css更改

2 个答案: