这个clip-path的坑我之前也踩过！你当前的问题核心在于父元素的全局clip-path把所有子元素的大部分空间都裁剪掉了——父元素被裁成三角形后，每个grid子元素的实际可见区域只有三角形内部的窄条，上层子元素的可见高度特别小，文本自然会顶在顶部被截断，而且根本没有足够的空间换行。

要解决文本垂直居中+自动换行的问题，我们需要让每个金字塔层级（子元素）本身就是独立的梯形，这样每个子元素内部有完整的可用空间来容纳文本。下面是具体的实现方案：

解决方案代码 #

<div class="pyramid">
  <div class="one">Hello this is a long text that should wrap properly</div>
  <div class="two">World and this one too - let's test line wrapping</div>
  <div class="three">Foo bar baz qux lorem ipsum dolor sit amet</div>
  <div class="four">Bar</div>
  <div class="five">Baz</div>
  <div class="six">Qux - this is the bottom layer with maximum width</div>
</div>

.pyramid {
  width: 100vmin;
  aspect-ratio: 2 / 1;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  gap: 1vmin;
}

/* 每个层级设置独立的梯形clip-path + flex居中 */
.pyramid > div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5vmin; /* 给文本留出行距和换行空间 */
  color: white;
  text-align: center;
}

.one {
  background-color: #EA1B07;
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
}

.two {
  background-color: #F4B600;
  clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%);
}

.three {
  background-color: #F9E029;
  clip-path: polygon(26% 0, 74% 0, 100% 100%, 0 100%);
}

.four {
  background-color: #049DFC;
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
}

.five {
  background-color: #A77643;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}

.six {
  background-color: #5CD533;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* 最底层是矩形 */
}

方案说明 #

1. 取消父元素的全局clip-path：转而给每个子元素单独设置梯形的clip-path，这样每个层级都有自己完整的矩形空间（只是视觉上是梯形），文本可以在里面自由排列。
2. 用Flex实现文本居中：每个子元素设置display: flex; align-items: center; justify-content: center;，完美解决垂直+水平居中的问题，比vertical-align靠谱多了。
3. 预留padding空间：给子元素加padding，避免文本紧贴梯形边缘，同时保证长文本有足够的换行空间。
4. 梯形宽度渐变：通过调整每个子元素clip-path的左右起始百分比（从42%/58%逐渐过渡到0%/100%），实现从上到下逐渐变宽的金字塔效果，和你原本的视觉需求一致。

这样修改后，不管是短文本还是长文本，都能在每个梯形层级里垂直居中，并且自动换行，完全不会被截断。

内容来源于stack exchange