Question

在我的网站Link上，我有我的博客，我希望每张卡都有一个阅读更多按钮。我特别希望它在折叠时只显示x个单词（非字符），然后在展开时显示整个文本。我不希望有一个按钮转到另一个包含完整内容的页面，因为我使用自己构建的CMS自动添加表单中的帖子。

我尝试过readmore.js，但这似乎根本不起作用。它什么都不做。我也尝试了jQuery.dotdotdot，它似乎也无法正常工作

这是一件非常奇怪的事情，我一直无法弄清楚。没有其他SO Q＆amp;我已经看到了帮助。

Answer 1

<p><a onclick="javascript:ShowHide('HiddenDiv')">read more</a></p>
<div class="mid" id="HiddenDiv" style="display: none;"><font face="Arial" size="+2" 

color="#306Eff" align="right">put the rest of the text here
</div>
<script type="text/javascript">// <![CDATA[
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
// ]]></script>

Answer 2

function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}

 
 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>

<button onclick="myFunction()" id="myBtn">Read more</button>

Answer 3

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader1 {
position: inherit;
top:inherit;
left: 0;
  right:0;
 text-align: center;
  z-index: 1;
  width: 50px;
  height: 50px;
 margin: auto;
}

.loader1:before {
  content: '';
  display: block;
  padding-top: 200%;
}

.circular1{
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
  height: 100%;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  width: 100%;
  position: inherit;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.path1{
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}
 @-webkit-keyframes 
rotate {  100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
 @keyframes 
rotate {  100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
@-webkit-keyframes 
dash {  0% {
 stroke-dasharray: 1, 200;
 stroke-dashoffset: 0;
}
 50% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -35;
}
 100% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -124;
}
}
@keyframes 
dash {  0% {
 stroke-dasharray: 1, 200;
 stroke-dashoffset: 0;
}
 50% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -35;
}
 100% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -124;
}
}
@-webkit-keyframes 
color {  100%, 0% {
 stroke: #d62d20;
}
 40% {
 stroke: #0057e7;
}
 66% {
 stroke: #008744;
}
 80%, 90% {
 stroke: #ffa700;
}
}
@keyframes 
color {  100%, 0% {
 stroke: #d62d20;
}
 40% {
 stroke: #0057e7;
}
 66% {
 stroke: #008744;
}
 80%, 90% {
 stroke: #ffa700;
}


.myDiv1 {
  display: none; 

}
  </style> 

  <style>
.loadmorex {
 position: absolute;
left: 0;
  right:0;
  text-align: center;
  z-index: 1;
   margin: auto;
 color: #fff !important;
letter-spacing:04px;
text-decoration: none;
background: #00aeef;
padding: 10px;
width:15%;
border-radius: 5px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
}

.loadmorex:hover {
background: #434343;
letter-spacing: 1px;
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.4s ease 0s;
}
</style>

<!-- loader 2 -->

</head>
<!-- By Suntrident.com-->

 <h2>Hello We Have Loaded Part 1</h2>
<p> A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. Wikipedia</p><p><b>Note:</b>This Lines are Used for demonstration</p> <h2>Hello We Have Loaded Part 1</h2>
<p> A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. Wikipedia</p><p><b>Note:</b>This Lines are Used for demonstration</p> 


<!--For Loading Part 1-->
<div id="loader1" class="loader1" style="display:none;" > 
<svg class="circular1" viewBox="25 25 50 50">
    <circle class="path1" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
   </svg><strong>Loading..</strong></div>
<div style="display:none;" id="myDiv1" class="animate-bottom">

  <h2>Hello We Have Loaded Part 1</h2>
<p> A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. Wikipedia</p><p><b>Note:</b>This Lines are Used for demonstration</p><h2>Hello We Have Loaded Part 1</h2>
<p> A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose. Wikipedia</p><p><b>Note:</b>This Lines are Used for demonstration</p>
</div>
 <button class="loadmorex" id="hideme" onclick="myFunction()" type="button">Load more</button>

<!--TIP : CHECK ALL ID NAME MATCH-->
<!-- By Suntrident.com-->

<br><br><br><br><br><br>


<script>
var myVar;

function myFunction() {
 // on button click below line displays loader :
 document.getElementById("loader1").style.display = "block";
 
 // on button click below line hides button:
        document.getElementById("hideme").style.display = "none";
        
// set on-timeout display content in below line:
  myVar = setTimeout(showPage, 2000);
}

function showPage() {
  document.getElementById("loader1").style.display = "none";
    document.getElementById("myDiv1").style.display = "block";
      
}
</script>
<!-- By Suntrident.com-->

</body>
</html>

HTML - 如何制作＆＃34;阅读更多＆＃34;按键

3 个答案: