我想通过jquery在html字符串的特定数量的单词之后动态添加“read more”切换文本。
<div class="container">
<h2>Ut lobortis elit luctus, feugiat erat vitae</h2>
Morbi placerat imperdiet risus quis blandit.
<ul>
<li>interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus.</li>
<li> Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst.</li>
</ul>
<div class="text">
Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
</div>
</div>
答案 0 :(得分：0)
请检查以下代码
HTML代码
<span class="more">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
<br><br>
<div class="more">
Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
</div>
jQuery代码
$(document).ready(function() {
var showChar = 100;
var ellipsestext = "...";
var moretext = "Show more >";
var lesstext = "Show less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
}）;
CSS代码
.morecontent span {
display: none;
}
.morelink {
display: block;
}
答案 1 :(得分：0)
我将模态和省略号演示结合在一起作为纯CSS解决方案。
<强>段
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>35619291</title>
<style>
html {
box-sizing: border-box;
height: 100vh;
width: 100vw;
line-height: 1;
font: 500 16px/1.428'Raleway';
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
position: relative;
font-size: 1rem;
height: 100%;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #777;
}
h1,
h2,
h3,
h4,
h5,
h6,
legend {
font-variant: small-caps;
margin-bottom: 15px;
color: #fc1;
}
h1 {
font-size: 1.5rem;
}
h2 {
font-size: 1.4rem;
}
h3 {
font-size: 1.3rem;
}
legend {
font-size: 1.35rem;
}
p {
margin: 0 5px 15px;
}
img {
display: inline-block;
width: 25em;
height: auto;
margin: 20px 0;
}
a {
color: #Fc0;
text-decoration: none;
margin: 10px 20px;
display: inline-block;
}
a:hover {
color: #CCC;
}
button {
font: inherit;
line-height: 1.5;
padding: 1px 3px;
border-radius: 8px;
border: 1px solid #fc2;
}
.noSel {
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
#aux {
padding: 10px;
}
#ext {
padding: 10px;
width: 100%;
height: 100%;
position: relative;
}
section {
padding: 20px 10px;
width: 100%;
height: auto;
border-bottom: 3px ridge #FF6;
margin: 0 5px 20px;
}
table.x {
position: relative;
padding: 0;
box-shadow: 0 1px 9px 1px #ccc;
border-radius: 6px;
margin: 20px auto;
table-layout: fixed;
width: 50%;
height: 100%;
max-height: 250px;
}
.x th {
color: #FFF;
background: #2C7EDB;
padding: 10px;
text-align: center;
vertical-align: middle;
}
.x tr:nth-child(odd) {
background-color: #333;
color: #FFF;
}
.x tr:nth-child(even) {
background-color: #D3E9FF;
color: #333;
}
.x td {
border-style: solid;
border-width: 1px;
border-color: #264D73;
padding: 5px;
text-align: left;
vertical-align: top;
position: relative;
}
.x thead th:first-child {
border-top-left-radius: 6px;
}
.x thead th:last-child {
border-top-right-radius: 6px;
}
.x tbody tr:last-child th:first-child {
border-bottom-left-radius: 6px;
}
.x tbody tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
#demo * {
font-weight: normal;
text-decoration: none;
}
#demo .button {
width: 150px;
padding: 10px;
background-color: rgba(0, 102, 204, .6);
box-shadow: -8px 8px 10px 3px rgba(0, 0, 0, 0.2);
}
#demo .cover {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 5;
width: 100%;
height: 100%;
display: none;
}
#demo #modal1,
#demo #modal2 {
min-height: 380px;
min-width: 340px;
margin: 0 30%;
position: relative;
z-index: 10;
display: none;
background: rgba(20, 81, 142, .6);
border: 5px solid #cccccc;
border-radius: 10px;
background-color: rgba(0, 102, 204, .6);
box-shadow: -8px 8px 10px 3px rgba(0, 0, 0, 0.2);
}
#demo #modal1:target,
#modal1:target + .cover,
#demo #modal2:target,
#modal2:target + .cover {
display: block;
opacity: 1;
}
#demo .cancel {
display: inline-block;
position: absolute;
top: 3px;
right: 2px;
background: rgb(245, 245, 245);
color: black;
height: 30px;
width: 35px;
font-size: 30px;
text-align: center;
padding-bottom: 20px;
border-radius: 10px;
}
#demo .cancel:after {
content: '\2715';
position: relative;
top: -5px;
}
#demo .ellipse p:last-of-type {
display: block;
position: relative;
outline: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
vertical-align: middle;
width: 100%;
}
article p {
margin: 0 5px 10px;
}
article {
padding: 50px 10px 15px;
}
</style>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<link href='https://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' />
<section id="demo">
<h1>C. R. E. P. O.</h1>
<h2>CSS Responsive Ellipsis Popup Overlay</h2>
<table class="x">
<tbody>
<tr>
<td>
<div class="ellipse">
<p>Well, Mercia's a temperate zone! Bring her forward! You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!</p>
<p>Look, my liege! Bring her forward! Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.</p>
<a href="#modal1" class="button">Continue…</a>
</div>
</td>
<td>
<div class="ellipse">
<p>I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time! I
am your king.</p>
<p>She looks like one. The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land. I dunno. Must be a king. Where'd you get the coconuts?</p>
<a href="#modal2" class="button">Continue…</a>
</div>
</td>
</tr>
</tbody>
</table>
<article id="modal1">
<nav>
<a href="#" class="cancel"></a>
</nav>
<p>Well, Mercia's a temperate zone! Bring her forward! You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!
</p>
<p>Look, my liege! Bring her forward! Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.</p>
</article>
<span class="cover"></span>
<article id="modal2">
<nav>
<a href="#" class="cancel"></a>
</nav>
<p>I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time! I am your
king.</p>
<p>She looks like one. The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land. I dunno. Must be a king. Where'd you get the coconuts?</p>
</article>
<span class="cover"></span>
</section>
</body>
</html>