1
私はこれらのニュースのブロックを持っていますが、私はをクリックしたときに「ショーより」宇宙は私がブロック間のスペースを削除するには？
デモ削除することはできませんブロックの間に表示されます：で sitelab.combr.co/repro.html
をこの瞬間
コード
\t \t
$(document).ready(function(){
var content = $('.card-text');
var moretext = "Show more ❯";
var lesstext = "Show less";
content.each(function(){
if ($(this).text().length > 83) {
$(this).addClass('truncate-ellipsis');
$(this).after('<a href="" class="readmore-link">' + moretext + '</a>');
}
});
$('.readmore-link').on('click', function(b){
b.preventDefault();
if($(this).prev().hasClass("truncate-ellipsis")) {
$(this).prev().removeClass("truncate-ellipsis");
$(this).html('Fechar');
$(this).attr('class','readmore-link');
} else{
$(this).prev().addClass("truncate-ellipsis");
$(this).html(moretext);
}
return false;
});
});\t \t
.truncate-ellipsis{
display: block;
display: -webkit-box;
height: 60px;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.readmore-link{
color:blue;
}<html lang="en">
<head>
\t <meta charset="UTF-8">
\t <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Rab Css -->
<link rel="stylesheet" href="http://sitelab.combr.co/css/style.css"/>
</head>
<body>
\t <div class="container">
<div class="row row-centered">
<h1 class="title">News</h1>
<h2 class="subtitle">Lorem Ipsum is simply dummy text</h2>
<div class="card-deck">
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card">
<img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
<div class="card-block">
<h4 class="card-title">CNN</h4>
<div class="meta">
<a href="#">News1</a>
</div>
<div class="card-text">Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card">
<img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
<div class="card-block">
<h4 class="card-title">CNN</h4>
<div class="meta">
<a href="#">News 2</a>
</div>
<div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ege</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card">
<img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
<div class="card-block">
<h4 class="card-title">BBC</h4>
<div class="meta">
<a href="#">News 1</a>
</div>
<div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card">
<img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
<div class="card-block">
<h4 class="card-title">BBC</h4>
<div class="meta">
<a href="#">News 1</a>
</div>
<div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card">
<img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
<div class="card-block">
<h4 class="card-title">BBC</h4>
<div class="meta">
<a href="#">News 1</a>
</div>
<div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card">
<img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
<div class="card-block">
<h4 class="card-title">BBC</h4>
<div class="meta">
<a href="#">News 1</a>
</div>
<div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card">
<img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
<div class="card-block">
<h4 class="card-title">BBC</h4>
<div class="meta">
<a href="#">News 1</a>
</div>
<div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="card">
<img class="card-img-top" src="http://www.sky-valley-web-design.com/images/250x150.gif">
<div class="card-block">
<h4 class="card-title">BBC</h4>
<div class="meta">
<a href="#">News 1</a>
</div>
<div class="card-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
https://stackoverflow.com/q/34480760/3597276 –