css - text.overflow 省略号不适用于段落？

Question

我正在创建一张顶部有图像和标题 ( 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, ultricies a consectetur a, imperdiet scelerisque orci.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, ultricies a consectetur a, imperdiet scelerisque orci.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, ultricies a consectetur
      a, imperdiet scelerisque orci.</p>
  </div>
</div>

标签： cssellipsis