CSS多边形内文本无法正确换行问题求助

我在开发课程作业的小型网站，尝试用polygon属性制作梯形动画效果，希望内部段落能在该形状内自动换行，但文本却溢出并消失。我还尝试设置另一个形状作为文本边界，结果依旧；使用shape-outside属性也没有效果。

原始代码 #

CSS

.overlay {
  position: absolute;
  float: right;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgb(56, 56, 56, 0.6);
  /* overflow: hidden; */
  width: 100%;
  height: 100%;
  transition: .5s ease;
  clip-path: polygon(0% 0%, 50% 0%, 100% 100%, 0% 100%);
  /* shape-outside: polygon(50% 0%, 100% 0%, 100% 100%); */
  translate: -50% 0%;
}
.container:hover .overlay {
  translate: 0% 0%;
}
.overlay3 {
  position: absolute;
  float: right;
  top: 0%; /* Positioning it centered vertically */
  left: 0%;
  right: 0;
  background-color: rgba(255, 128, 64, 0.6);
  overflow: hidden;
  width: 100%; /* Make it take up some width so the text can wrap */
  height: 100%; /* Adjust height as necessary */
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%);
  shape-outside: polygon(50% 0%, 100% 0%, 100% 100%);
}
.heading-ac-130 {
  font-size: 175%;
  /* border: 2px solid black; */
  /* padding-left: 5%; */
  text-align: left;
  color: black;
  font-family: verdana;
}
.text p{
  color: white;
  font-family: courier;
  font-size: 100%;
  position: absolute;
  /* overflow: hidden; */
  transform: translate(-0%, -50%);
  -ms-transform: translate(-0%, -50%);
  clear: both;
  text-align: left;
}

HTML

<HTML>
<HEAD>
  <link rel="stylesheet" href="styles.css">
  <!-- style="color: white;" -->
  <TITLE >
    AC-130
  </TITLE>
</HEAD>
<BODY>
  <div class="container">
    <img src="AC.jpg" alt="Gunship" class="image">
    <div class="overlay">
      <div class="heading-ac-130">
        <H1 >AC-130</H1>
      </div>
      <div class="text">
        <P >
          Il Lockheed AC-130, noto anche come Angelo della Morte (Death Angel), è un quadrimotore a turboelica impiegato come cannoniera volante pesantemente armata per l'attacco al suolo, in servizio presso l'United States Air Force dalla fine degli anni sessanta fino ai giorni nostri. L'aereo è una variante del C-130 da trasporto costruito dalla Lockheed e viene convertito dalla Boeing in cannoniera. <br>
          Il velivolo è in dotazione solo all'USAF che lo ha impiegato nella guerra del Vietnam e nella guerra del Golfo, dove peraltro uno di questi aerei è stato abbattuto. Durante la guerra del Vietnam furono persi 6 AC 130. 
        </P>
      </div>
    </div>  
    <div class="overlay3"></div>
  </div>
</BODY>
</HTML>

修改后的代码 #

CSS

.container {
  position: relative;
  width: 100%;
  max-width: 800px;
  overflow: hidden;
}
.image {
  width: 100%;
  display: block;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(56, 56, 56, 0.6);
  transition: .5s ease;
  clip-path: polygon(0% 0%, 50% 0%, 100% 100%, 0% 100%);
  translate: -100% 0;
  padding: 2rem;
  box-sizing: border-box;
  overflow: hidden;
}
.container:hover .overlay {
  translate: 0% 0%;
}
.heading-ac-130 {
  font-size: 175%;
  text-align: left;
  color: black;
  font-family: verdana;
  margin-top: 0;
}
.text p {
  color: white;
  font-family: courier;
  font-size: 100%;
  text-align: left;
  margin: 1rem 0 0 0;
}

HTML

<HTML>
<HEAD>
  <link rel="stylesheet" href="styles.css">
  <TITLE>AC-130</TITLE>
</HEAD>
<BODY>
  <div class="container">
    <img src="AC.jpg" alt="Gunship" class="image">
    <div class="overlay">
      <div class="heading-ac-130">
        <H1>AC-130</H1>
      </div>
      <div class="text">
        <P>
          Il Lockheed AC-130, noto anche come Angelo della Morte (Death Angel), è un quadrimotore a turboelica impiegato come cannoniera volante pesantemente armata per l'attacco al suolo, in servizio presso l'United States Air Force dalla fine degli anni sessanta fino ai giorni nostri. L'aereo è una variante del C-130 da trasporto costruito dalla Lockheed e viene convertito dalla Boeing in cannoniera.
          <br>
          Il velivolo è in dotazione solo all'USAF che lo ha impiegato nella guerra del Vietnam e nella guerra del Golfo, dove peraltro uno di questi aerei è stato abbattuto. Durante la guerra del Vietnam furono persi 6 AC 130. 
        </P>
      </div>
    </div>
  </div>
</BODY>
</HTML>

关键修改说明 #

• 给.container设置position: relative，确保绝对定位的.overlay能正确相对它定位
• 移除.text p的position: absolute和transform，让文本回到文档流，自然受父容器clip-path的形状约束
• 给.overlay添加padding和box-sizing: border-box，避免文本贴到梯形边缘，同时保证内边距不超出容器宽度
• 调整.overlay初始translate为-100% 0，让动画展开更自然，hover时完全显示
• 删除冗余的.overlay3，直接用.overlay的clip-path实现形状约束
• 开启.overlay的overflow: hidden，配合clip-path裁剪超出梯形范围的文本

内容的提问来源于stack exchange，提问作者The Flipper Stone 782