Question

我正在编写代码，允许我在冗长内容的末尾添加“阅读更多”链接。点击后，它会显示其余内容并展开。

我遇到的问题是这种方法会破坏文本的格式，直到选择“更多”链接。

这有什么办法吗？我想在你点击阅读更多之前和之后保持文本格式。

参见下面的演示

$(document).ready(function() {
  length = 200;
  cHtml = $(".content").html();
  cText = $(".content").text().substr(0, length).trim();
  $(".content").addClass("compressed").html(cText + "... <a href='#' class='exp'>More</a>");
  window.handler = function() {
    $('.exp').click(function() {
      if ($(".content").hasClass("compressed")) {
        $(".content").html(cHtml + "<a href='#' class='exp'>Less</a>");
        $(".content").removeClass("compressed");
        handler();
        return false;
      } else {
        $(".content").html(cText + "... <a href='#' class='exp'>More</a>");
        $(".content").addClass("compressed");
        handler();
        return false;
      }
    });
  }
  handler();
});

body {
  margin: 0;
  padding: 0;
  font: 12px/1.5 sans-serif;
}

.content,
.content p {
  text-align: justify;
  margin: 0 0 10px;
}

a {
  text-decoration: none;
  color: #00f;
}

a:hover {
  text-decoration: underline;
  color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="content">
  <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit. Totam suscipit veniam non <a href="#">magni similique</a>. Asperiores aut sapiente nobis porro ad provident eveniet eos aspernatur quidem iusto! Dolorum libero porro animi.</p>
  <p>Consectetur adipisicing elit. Sapiente aperiam voluptas mollitia laboriosam delectus <strong>possimus minus quaerat culpa</strong> eos corporis tenetur ducimus quo incidunt aspernatur doloremque unde nihil. Quis quaerat!</p>
  <p>Ea iusto obcaecati cumque quae numquam minima laboriosam porro sit a animi reprehenderit eveniet saepe aperiam optio nemo eos et. Eaque perferendis.</p>
</div>

Answer 1

因为你正在使用

$(".term-description").text()

您需要做的是

$(".term-description")[0].innerHTML

Answer 2

更改此行

if (cin >> first)
{
  if (cin >> middle)
  {
    if (cin >> last)
    {
      //...
    }
    else
    {
      last = middle;
    }
  }
}

到

cText = $(".content").text().substr(0, length).trim();

Working Fiddle

阅读更多文字展开。目前丢失格式，直到您按“阅读更多”

2 个答案: