我有這方面的消息塊,但是當我點擊「顯示更多」看來,我無法刪除如何刪除塊之間的空間?
演示塊之間的空間: 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 –