我想实现一个合适的卡片,在侧面有合适的填充,但是没有成功。问题是Flex内容容器不会通过调整边距或减少距离或其他方式来尊重父级(卡片)。它不会调整大小或遵循属性。我尝试单独减少文本大小,但是也不起作用。
$(".owl-testimonials").owlCarousel({
loop: true,
item: 3,
startPosition: 1,
center: true,
autoplay: false,
autoplayTimeout: 3000,
autoplayHoverPause: true,
});
.owl-testimonials {
margin-bottom: 30px;
}
.testimonial-card {
height: 100%;
text-overflow: ellipsis;
overflow: hidden;
padding-bottom: 20px;
width: 100%;
padding: 20px;
display: flex;
flex-direction: row;
border-radius: 20px;
background: white;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
text-align: center;
align-content: space-evenly;
justify-content: center;
transform: scale(0.5);
transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1);
}
.owl-item.center .testimonial-card {
transform: scale(0.8);
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.9);
}
.testimonial-content {
height: 100%;
display: flex;
flex-direction: column;
}
.testi-img {
width: 100%;
height: 100%;
position: relative;
}
.testi-title {
color: wheat;
filter: drop-shadow(0 0 0.75rem #000);
text-align: center;
border-radius: 40px;
margin-top: 30px;
padding: 30px;
width: 30%;
margin-inline: auto;
font-weight: bold;
font-size: xx-large;
}
<h3 class="testi-title"> Testimonial</h3>
<section class="owl-carousel owl-testimonials">
<div class="testimonial-card">
<img class="testi-img" src="images/team/team2.jpg" alt="Testimonial 1">
<div class="testimonial-content">
<h4>Bu Irma</h4>
<h5 class="date">Dosen</h5>
<p>
Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
</p>
</div>
</div>
<div class="testimonial-card">
<img class="testi-img" src="images/team/team1.jpg" alt="Testimonial 2">
<div class="testimonial-content">
<h4>Pak Andre</h4>
<h5 class="date">Kontraktor</h5>
<p>
Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
</p>
</div>
</div>
<div class="testimonial-card">
<img class="testi-img" src="images/team/team3.jpg" alt="Testimonial 3">
<div class="testimonial-content">
<h4>Pak Budi</h4>
<h5 class="date">Pedagang Bakso</h5>
<p>
Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
</p>
</div>
</div>
</section>
1条答案
按热度按时间9vw9lbht1#
text-overflow直到文本首先溢出时才会生效。
更改此内容:
对此: