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>