网站底部文本截断问题咨询：疑与.wrapperTeam类相关

我网站底部的文本出现了截断情况，不确定错误所在，但推测问题可能出在.wrapperTeam类或其下方代码中。附上截断文本截图，该区域CSS代码如下：

#team {
 max-height: 920px;
 height: 100vp;
 background-color: #e7f1f8;
 text-align: center;
 h1 {
 font-size: 40px;
 color: #3c4761;
 font-weight: 800;
 text-transform: uppercase;
 margin-top: 80px;
 padding-bottom: 20px;
 }
 .line {
 margin-bottom: 25px;
 }
 p {
 font-size: 18px;
 color: #3c4761;
 }
 .wrapperTeam {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 grid-template-rows: 1fr;
 margin-top: 80px;
 h4 {
 font-size: 24px;
 text-transform: uppercase;
 margin-top: 40px;
 }
 .work {
 color: #30bae7;
 margin-top: 0;
 }
 p {
 font-size: 16px;
 font-weight: 300;
 width: 190px;
 margin: 30px auto 0 auto;
 }
 .social {
 display: inline-block;
 }
 }
}

嘿，我帮你排查了这段CSS代码，发现几个很可能导致文本截断的问题，咱们一个个说：

• 第一个致命笔误：无效的height: 100vp属性
  你这里把视口高度单位写错了，正确的应该是100vh，而vp是完全无效的单位。这会导致#team容器的高度计算异常，再加上你设置了max-height: 920px，如果团队模块的实际内容高度超过920px，容器就会被强制截断——因为max-height限制了它的最大高度，而无效的height值又没法让容器自适应内容。

• 网格行高固定导致内容溢出
  .wrapperTeam里的grid-template-rows: 1fr会把网格行的高度固定为容器剩余空间的1份，如果某个团队成员的内容（比如长一点的描述文本）总高度超过了这个固定行高，就会被截断。建议直接去掉这个属性，让网格行自动适应内容高度。

• 固定宽度的文本容器可能挤压内容
  .wrapperTeam p设置了width: 190px的固定宽度，如果文本内容过长，换行后可能因为容器高度不够被截断。换成max-width: 190px会更灵活，既能限制最大宽度，又能在小屏幕下自动收缩，避免内容被挤压。

修改后的参考代码 #

#team {
 max-height: none; /* 如果不需要限制最大高度，直接去掉或设为none */
 height: auto; /* 让容器自适应内容高度，替代无效的100vp */
 background-color: #e7f1f8;
 text-align: center;

 h1 {
 font-size: 40px;
 color: #3c4761;
 font-weight: 800;
 text-transform: uppercase;
 margin-top: 80px;
 padding-bottom: 20px;
 }

 .line {
 margin-bottom: 25px;
 }

 p {
 font-size: 18px;
 color: #3c4761;
 }

 .wrapperTeam {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 /* 移除固定行高，让行自适应内容 */
 margin-top: 80px;
 gap: 20px; /* 增加网格间距，避免内容拥挤 */

 h4 {
 font-size: 24px;
 text-transform: uppercase;
 margin-top: 40px;
 }

 .work {
 color: #30bae7;
 margin-top: 0;
 }

 p {
 font-size: 16px;
 font-weight: 300;
 max-width: 190px; /* 改用max-width提升灵活性 */
 margin: 30px auto 0 auto;
 word-wrap: break-word; /* 确保长文本正常换行 */
 }

 .social {
 display: inline-block;
 }
 }
}

内容的提问来源于stack exchange，提问作者MichalDusza