如何解决text.overflow省略号不适用于段落吗?
我正在创建一张卡片,卡片顶部有一张图片,标题是h1
。
末尾图像下方是一个较长的段落,但它从我的卡(p
)中溢出。我使用了overflow hidden
;它有效,但是当我使用text-overflow
时它不起作用:没有任何显示。
* {
margin: 0;
padding: 0;
}
.cont {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.card {
width: 300px;
height: 600px;
background-color: #f4f4f4;
border-radius: 10px;
box-shadow: 2px 5px 5px gray;
transition: box-shadow 0.25s;
display: block;
}
.card:hover {
box-shadow: 0px 15px 15px gray;
}
.circle {
background-image: url('https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&h=350&w=860');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 300px;
border-radius: 50%;
height: 300px;
}
p {
text-align: center;
font-weight: 500;
width: 300px;
height: 200px;
overflow: hidden;
white-space: wrap;
text-overflow: ellipsis;
}
h1 {
text-align: center;
font-weight: 900;
height: 100px;
}
<div class="cont">
<div class="card">
<div class="circle"></div>
<h1>hello i am the title</h1>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Aliquam mollis sit amet nunc nec fermentum. Cras sit amet efficitur leo. Vivamus malesuada felis blandit odio semper maximus. Phasellus nec lacus enim. Aliquam lobortis nibh et ipsum aliquam,quis iaculis orci tincidunt. Curabitur sed orci porta,ultricies libero et,iaculis erat. Aenean tristique ex quis ante sagittis luctus. Aenean tempor accumsan erat,ut mollis dolor. Nam rutrum neque sed lectus aliquet,in viverra elit cursus. Praesent
libero lectus,ultricies a consectetur a,imperdiet mollis dolor. Nam rutrum neque sed lectus aliquet,in viverra elit cursus. Praesent libero lectus,imperdiet scelerisque orci.mollis dolor. Nam rutrum neque sed lectus
aliquet,imperdiet scelerisque orci.mollis
dolor. Nam rutrum neque sed lectus aliquet,ultricies a consectetur
a,imperdiet scelerisque orci.</p>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。