在我的网站上，我有我的博客，我希望每张卡片都有一个阅读更多按钮。我特别希望它在折叠时只显示x单词（非字符），然后在展开时显示整个文本。我不想有一个按钮，带到另一个页面上有完整的内容，因为我正在使用我自己构建的CMS，它会自动添加来自表单的帖子。
我试过readmore.js，但似乎根本不起作用。它什么都不做。我也试过jQuery.dotdotdot，它似乎也不适用于
这是一件非常奇怪的事情，我一直没能弄清楚。没有其他SO问答；A对我所看到的有所帮助。
<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>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> <!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>